使用JS访问HTML样式属性
使用JS访问HTML样式属性
提问于 2012-11-27 12:36:08
如何从HTML元素的style属性中获取CSS属性(忽略样式表/计算属性)？
例如：
<div style="float:left"></div>
function getStyle(element, name) { ... }
getStyle(element, 'float') === 'left';
getStyle(element, 'font-weight') === null;我不介意raw JS或jQuery。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-11-27 12:40:25
如果你想要纯JS，这个例子：
element.style.display = 'none';Stack Overflow用户
发布于 2012-11-27 12:37:11
这对你不起作用吗？
$('div').attr('style');如果您想要进一步解析：
var getStyles = function(element) {
// ensure element has style
if (! element.attr('style')) {
return {};
}
// init styles
var styles = {}
// parse style attr
$.each(element.attr('style').split(/\s*;\s*/), function(i,style) {
if (style.length) { // a style string ending in ; will cause an empty pair after splitting
pair = style.split(/\s*:\s*/);
styles[pair[0]] = pair[1];
}
});
return styles;
};几个测试
// test an element with style attr
var element = $('<div style="float:left"></div>');
console.log(getStyles(element)); //=> {float: "left"}
console.log(getStyles(element).float); //=> left
console.log(getStyles(element).hello); //=> undefined
// test some element without style attr
var element2 = $('<p>hello</p>');
console.log(getStyles(element2).float); //=> undefined
console.log(getStyles(element2).hello); //=> undefined
// a bit more complex
var element3 = $('<div style="float:left; background-color:red; color:#555; opacity: 0.5 !important;"></div>');
console.log(getStyles(element3)); //=> {float: "left", opacity: "0.5 !important", background-color: "red", color: "#555"}
console.log(getStyles(element3).float); //=> left
console.log(getStyles(element3).opacity) //=> 0.5 !important;
console.log(getStyles(element3)["background-color"]); //=> red
See it working on jsFiddle
Stack Overflow用户
发布于 2012-11-27 12:38:47
您可以使用
var floating = $('div').css('float');
$('div').css('float','left');使用jQuery访问每个样式参数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13577457
复制相关文章
相似问题
腾讯云开发者
