我想知道是否可以确定哪些内联样式归因于HTML元素。我不需要检索该值,而只是检测它是否已内联设置。
例如,如果HTML是:
<div id="foo" style="width: 100px; height: 100px; background: green;"></div>
如何确定width
,height
和background
已明确声明为内联?
据我所知,解决方案可以有两种方式。我可以问它是否设置了一个特定的属性,它会告诉我是真还是假,或者它可以告诉我所有已设置的属性。像这样:
var obj = document.getElementById('foo');
obj.hasInlineStyle('width'); //returns true;
obj.hasInlineStyle('border'); //returns false;
//or
obj.getInlineStyles(); //returns array with values:
// 'width' 'height' and 'background'
我对通过样式表中的声明继承的css属性不感兴趣,只对内联样式感兴趣。最后一件事,我无法控制HTML源代码。
由于
答案 0 :(得分:3)
已更新以使用IE
你可以试试这样的事情
function hasInlineStyle(obj, style) {
var attrs = obj.getAttribute('style');
if(attrs === null) return false;
if(typeof attrs == 'object') attrs = attrs.cssText;
var styles = attrs.split(';');
for(var x = 0; x < styles.length; x++) {
var attr = styles[x].split(':')[0].replace(/^\s+|\s+$/g,"").toLowerCase();
if(attr == style) {
return true;
}
}
return false;
}
所以如果你有这样的元素:
<span id='foo' style='color: #000; line-height:20px;'></span>
它还有一个这样的样式表:
#foo { background-color: #fff; }
该函数将返回...
var foo = document.getElementById('foo');
alert(hasInlineStyle(foo,'color')); // true
alert(hasInlineStyle(foo,'background-color')); // false
答案 1 :(得分:1)
HTML元素的style属性返回一个列出所有属性的样式对象。任何具有值(除了null或空字符串之外)的内容都已在内联样式属性中设置。
答案 2 :(得分:0)
你可能想尝试做类似的事情:
var obj = document.getElementById("foo");
var obj_has_background = (obj.style.background != "");
var obj_has_width = (obj.style.width != "");
var obj_has_height = (obj.style.height != "");
似乎有点长,但这是我能想到的最好(也是最短)的解决方案。
答案 3 :(得分:0)
您是否尝试检查某个样式属性是否存在,或者只是想要一个可能的属性列表? 如果您已经知道该属性,那么您可以使用
hasStyle(obj,'width');
function hasStyle(obj, style)
{
switch(style)
case 'width':
return obj.style.width ? true : false;
case 'background':
return obj.style.background ? true : false;
}
您可以使用Paolo的函数生成样式数组。
答案 4 :(得分:0)
这里有两个函数返回本地元素样式定义:
function getLocalStyle(pEleId, pStyle) {
var camelStyle = camelCase( pStyle );
var eleStyles = document.getElementById(pEleId).style
return eleStyles[camelStyle];
}
function camelCase(str) {
return str
.split('-')
.reduce((a, b) => a + b.charAt(0).toUpperCase() + b.slice(1));
}
用法:
var backgroundColor = getLocalStyle( pLayerName, "background-color" );