我使用 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"
最佳答案
我创建了这个函数:
function getProperty(element, property){
return (element.style[property] != "") ? element.style[property] : $(element).css(property);
}
返回 style=""属性中设置的属性值,如果尚未设置属性,则返回绝对值。
关于javascript - 如何使用 $ ("selector").css() 获取相对单位 (%, em) 的 css 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46328057/