如何使用$(" selector")来获取相对单位(%,em)的css属性.css()?

时间:2017-09-20 17:12:06

标签: javascript jquery css

我使用jQuery来获取HTML元素的css属性。但它并不像我想的那样有效。所以我做了一点测试:

var div = document.createElement("DIV");
    div.id = "testdiv";
var testZero = $(div).css("width") + " / " + div.style.width;
   $(div).css("width", "50%");
var testOne = $(div).css("width") + " / " + div.style.width;
    document.getElementById("res").appendChild(div);
var testTwo = $(div).css("width") + " / " + div.style.width;
var testThree = $("#testdiv").css("width") + " / " + document.getElementById("testdiv").style.width;

测试变量的值:

testZero: 0px / ""
testOne: 50% / 50%
testTwo: 670px / 50%
testThree: 670px / 50%

结果如下:

  • testZero :jQuery版本返回0px。 JS版本返回"" (空字符串),如果规则没有设置。
  • testOne :设置规则后,两个版本都能正常运行。
  • testTwo :JS版本正常运行。但是只要我附加div元素,jQuery版本只返回px值。
  • testThree :重新选择元素也是如此。

问题是:在我追加元素之后,有没有办法让jQuery版本的单位出现?

例如:

$(element).css("width", "50%"); //I set the rule
container.appendChild(element); //I append the element
var width = $(element).css("width"); //And the result is also "50%" not "xxpx"

1 个答案:

答案 0 :(得分:0)

我创建了这个函数:

function getProperty(element, property){
    return (element.style[property] != "") ? element.style[property] : $(element).css(property);
}

返回在style =""中设置的属性值。如果尚未设置属性,则返回属性,或返回绝对值。