关于使用“.style.something” - javascript

时间:2013-10-13 19:43:50

标签: javascript css html5

我有以下javascript代码:

function createDiv(id){
      var temp = document.createElement('div');
      temp.setAttribute("id", id); 
      document.getElementsByTagName('body')[0].appendChild(temp);
    }

createDiv('upper_outer');

function /*ABSTRACTION*/(e)
    {

          /* Part not shown of the function is working correctly */

          var upper = document.getElementById("upper_outer");

          upper.style.display = "block";
          upper.style.position = "absolute";
          upper.style.height = $(document).height() - init_co[0] + "px";
          upper.style.width = s_box.style.width + "px";
          upper.style.left =  init_co[0] + "px";
          upper.style.top = init_co[1] + "px";
}

通过开发控制台我可以检查div是否已经使用正确的id创建了div,但是没有任何更改,因为它应该与style属性有关。关于这个的任何想法? (请忽略此代码中未显示的变量,它们已正确实现)。

编辑:

调用该函数。部分功能实际上正在发挥作用。

2 个答案:

答案 0 :(得分:2)

无论您在常规javascript中对问题的答案如何,我都注意到您使用的是jQuery和普通旧Javascript的混合。由于您已经在使用jQuery,因此您也可以使用它。 (我知道,对吧?)

试试这个:

function createDiv(id)
{
    $('<div></div>').attr('id',id).appendTo('body');
}

createDiv('upper_outer');

//I'm assuming this is created in response to some sort of event.
//Perhaps the event isn't being triggered?
//Are you sure all your variables are defined? - init_co and s_box
function /*ABSTRACTION*/(e)
{
    $('#upper_outer').css(
    {
        'display':'block',
        'position':'absolute',
        'height':$(document).height() - init_co[0] + 'px',
        'width':s_box.css('width'),
        'left':init_co[0] + 'px',
        'top':init_co[1] + 'px'
    });
}

请注意:每页只能有1个(一个!!!!)ID。 ID是唯一的。如果具有此ID的div已多次创建,则可能不会更改您认为自己的div样式。如果您打算创建多个这些div,请改用“class”。如果你没有,也许你应该考虑在创建之前检查元素是否存在?

//Inside createDiv()
if($('#'+id).length)) return;

答案 1 :(得分:0)

那是因为你没有调用改变风格的函数。

无论如何,函数中还有另一个参数不存在。 谁是s_boxinit_col

尝试此代码,但首先添加参数:

function createDiv(id) {
      var temp = document.createElement('div');
      temp.setAttribute("id", id); 
      document.getElementsByTagName('body')[0].appendChild(temp);
}

createDiv('upper_outer');
addStyle();

function addStyle()
{

      var upper = document.getElementById("upper_outer");

      upper.style.display = "block";
      upper.style.position = "absolute";
      upper.style.height = $(document).height() - init_co[0] + "px";
      upper.style.width = s_box.style.width + "px";
      upper.style.left =  init_co[0] + "px";
      upper.style.top = init_co[1] + "px";
}

jsFiddle