$cache[$key] = empty($arr) ? NULL : $arr; return $cache[$key]; } // 门户 获取需要在频道显示的栏目主题数据 function portal_channel_thread($fid) { global $forumlist; if (empty($fid)) return NULL; $orderby = array('tid' => 1); $page = 1; // 遍历所有在频道显示内容的栏目 $category_forumlist = channel_category($fid); $arrlist = array(); $forum_tids = array(); $tidlist = array(); if ($category_forumlist) { foreach ($category_forumlist as &$_forum) { // 频道显示数据 $arrlist['list'][$_forum['fid']] = array( 'fid' => $_forum['fid'], 'name' => $_forum['name'], 'rank' => $_forum['rank'], 'type' => $_forum['type'], 'url' => $_forum['url'], 'channel_new' => $_forum['channel_new'], ); $forum_thread = thread_tid__find(array('fid' => $_forum['fid']), $orderby, $page, $_forum['channel_new'], 'tid', array('tid')); // 最新信息按栏目分组 foreach ($forum_thread as $key => $_thread) { $forum_tids[$key] = $_thread; } unset($forum_thread); } $tidlist += $forum_tids; } unset($category_forumlist); // 获取属性对应的tid集合 list($flaglist, $flagtids) = flag_thread_by_fid($fid); empty($flagtids) || $tidlist += $flagtids; unset($flagtids); // 频道置顶 $stickylist = sticky_list_thread($fid); empty($stickylist) || $tidlist += $stickylist; // 在这之前合并所有二维数组 tid值为键/array('tid值' => tid值) $tidarr = arrlist_values($tidlist, 'tid'); // 在这之前使用$tidarr = array_merge($tidarr, $arr)前合并所有一维数组 tid/array(1,2,3) if (empty($tidarr)) { $arrlist['list'] = isset($arrlist['list']) ? array_multisort_key($arrlist['list'], 'rank', FALSE, 'fid') : array(); return $arrlist; } $tidarr = array_unique($tidarr); $pagesize = count($tidarr); // 遍历获取的所有tid主题 $threadlist = well_thread_find_asc($tidarr, $pagesize); // 遍历时为升序，翻转为降序 $threadlist = array_reverse($threadlist); foreach ($threadlist as &$_thread) { // 各栏目最新内容 isset($forum_tids[$_thread['tid']]) AND $arrlist['list'][$_thread['fid']]['news'][$_thread['tid']] = $_thread; // 全站置顶内容 isset($stickylist[$_thread['tid']]) AND $arrlist['sticky'][$_thread['tid']] = $_thread; // 首页属性主题 if (!empty($flaglist)) { foreach ($flaglist as $key => $val) { if (isset($val['tids']) && in_array($_thread['tid'], $val['tids'])) { $arrlist['flaglist'][$key][array_search($_thread['tid'], $val['tids'])] = $_thread; ksort($arrlist['flaglist'][$key]); $arrlist['flag'][$_thread['tid']] = $_thread; } } } } unset($threadlist); if (isset($arrlist['sticky'])) { $i = 0; foreach ($arrlist['sticky'] as &$val) { ++$i; $val['i'] = $i; } } if (isset($arrlist['flag'])) { $i = 0; foreach ($arrlist['flag'] as &$val) { ++$i; $val['i'] = $i; } } if (isset($arrlist['flaglist'])) { foreach ($arrlist['flaglist'] as &$val) { $i = 0; foreach ($val as &$v) { ++$i; $v['i'] = $i; } } } isset($arrlist['list']) AND $arrlist['list'] = array_multisort_key($arrlist['list'], 'rank', FALSE, 'fid'); return $arrlist; } ?>How to insert variables in inline CSS rules with pure JavaScript? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>How to insert variables in inline CSS rules with pure JavaScript? - Stack Overflow

    How to insert variables in inline CSS rules with pure JavaScript? - Stack Overflow

    programmeradmin0浏览0评论

    I am calculating the x variable earlier in the code and i want to insert that variable value in the inline style of the div, but it doesn't work, though it works perfectly if i insert constant like "100px". 

    var x;  
document.getElementById("block").style.position = "fixed";  
document.getElementById("block").style.left = x;

    Note: i want to get it working without using jquery because i am using only a couple of scripts on the website and it is useless to link a big library in my case.

    I am calculating the x variable earlier in the code and i want to insert that variable value in the inline style of the div, but it doesn't work, though it works perfectly if i insert constant like "100px". 

    var x;  
document.getElementById("block").style.position = "fixed";  
document.getElementById("block").style.left = x;

    Note: i want to get it working without using jquery because i am using only a couple of scripts on the website and it is useless to link a big library in my case.

    • javascript
    • css
    • inline-styles
    Share Improve this question edited Oct 19, 2013 at 18:13 svtslvskl asked Aug 11, 2013 at 12:08 svtslvsklsvtslvskl 6191 gold badge7 silver badges9 bronze badges 3
    • Something to consider: it may be useless to link a "big" library like jQuery only if you host it yourself. You can use the jQuery CDN or Google's CDN to do the heavy lifting for you on the client side. jQuery gives you a tremendous development advantage over raw JavaScript. That's why it was created in the first place. Also, jQuery is pure JavaScript. – jrd1 Commented Aug 11, 2013 at 12:14
    • What is x? A number? A string? – Jonathan Naguin Commented Aug 11, 2013 at 12:16
    • 1 So long as you've got an appropriate value for x what you've written should work (albeit I'd retrieve the element once, and use a cached variable to access it again). So, what happens, or doesn't happen, that goes against your expectations? – David Thomas Commented Aug 11, 2013 at 12:20
    Add a comment  | 

    3 Answers 3

    Reset to default 10

    If you came here looking how to set CSS variables in the inline style, here you go:

    element.style.setProperty("--my-var", jsVar + 4);

    Ok so I can't post comments yet but I've run into a similar problem before.

    Without any additional code I can make an assumption that x is the calculated value and it is a number. It is invalid css to insert just a number into left thus you must append a unit to it before assign it to the property:

    document.getElementById("block").style.left = x + 'px';

    If that fixes your problem, then great! Otherwise please post how you calculate x between var x; to the assignment of x.

    I think you are looking for something like this

    var xx = 100
document.getElementById("block").style.width = xx+'px';

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论