[英]Access HTML style attribute with JS
How do I get a CSS property from the style
attribute of an HTML element (and ignore the stylesheet/computed properties)? 如何从HTML元素的style
属性获得CSS属性(而忽略样式表/计算属性)?
Eg: 例如:
<div style="float:left"></div>
function getStyle(element, name) { ... }
getStyle(element, 'float') === 'left';
getStyle(element, 'font-weight') === null;
I don't mind either raw JS or jQuery. 我不在乎原始JS或jQuery。
Does this not work for you? 这对您不起作用吗?
$('div').attr('style');
If you want to parse this further: 如果您想进一步解析:
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;
};
A couple tests 几次测试
// 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 看到它在jsFiddle上工作
如果您想使用纯JS,则此示例:
element.style.display = 'none';
You can use 您可以使用
var floating = $('div').css('float');
$('div').css('float','left');
To access each styling parameters with jQuery. 使用jQuery访问每个样式参数。
您也可以通过prop()
函数访问
$('div').prop('style');
Here's a quick improvement on macek's code. 这是macek代码的快速改进。
This function is in the format asked by Petah. 此功能采用Petah要求的格式。 Plus, this function breaks as soon as it finds a match, hence eliminating the need to scan the entire "style" attribute. 另外,此功能在找到匹配项后即会中断,因此无需扫描整个“样式”属性。
function getStyle(element, name) {
if (! element.attr('style')) {
return {};
}
var result= "";
$.each(element.attr('style').split(/\s*;\s*/), function(i,style) {
if (style.length) {
pair = style.split(/\s*:\s*/);
if(pair[0] == name) {
result = pair[1];
return false;
}
}
});
return result;
};
Js Fiddle for examples on usage : http://jsfiddle.net/rxpMJ/2/ Js Fiddle的用法示例: http : //jsfiddle.net/rxpMJ/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.