Javascript 如何读取元素的内联样式?
我想知道是否有可能确定HTML元素的内联样式是什么。我不需要检索该值,只需要检测它是否被内联设置 例如,如果HTML是:Javascript 如何读取元素的内联样式?,javascript,css,inline,styling,Javascript,Css,Inline,Styling,我想知道是否有可能确定HTML元素的内联样式是什么。我不需要检索该值,只需要检测它是否被内联设置 例如,如果HTML是: <div id="foo" style="width: 100px; height: 100px; background: green;"></div> 我对通过样式表中的声明继承的css属性不感兴趣,只对内联样式感兴趣。最后一件事,我无法控制HTML源代码 谢谢HTML元素的style属性返回一个列出所有属性的style对象。在内联样式属性上设置了
<div id="foo" style="width: 100px; height: 100px; background: green;"></div>
我对通过样式表中的声明继承的css属性不感兴趣,只对内联样式感兴趣。最后一件事,我无法控制HTML源代码
谢谢HTML元素的style属性返回一个列出所有属性的style对象。在内联样式属性上设置了任何具有值(null或空字符串除外)的元素。HTML元素的样式属性返回一个列出所有属性的样式对象。已在内联样式属性上设置了任何具有值(null或空字符串除外)的属性。已更新以使用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;
}
函数将返回
var foo = document.getElementById('foo');
alert(hasInlineStyle(foo,'color')); // true
alert(hasInlineStyle(foo,'background-color')); // false
已更新以使用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;
}
函数将返回
var foo = document.getElementById('foo');
alert(hasInlineStyle(foo,'color')); // true
alert(hasInlineStyle(foo,'background-color')); // false
您可能希望尝试执行以下操作:
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 != "");
看起来有点长,但这是我能想到的最好(也是最短的)解决方案。您可能想尝试执行以下操作:
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 != "");
看起来有点长,但这是我能想到的最好(也是最短的)解决方案。您是想检查某个样式属性是否存在,还是只想要一个可能属性的列表? 如果您已经知道该属性,那么您可以使用
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的函数生成样式数组。您是要检查某个样式属性是否存在,还是只想要一个可能属性的列表? 如果您已经知道该属性,那么您可以使用
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函数生成样式数组。以下是两个返回本地元素样式定义的函数:
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" );
以下是两个返回局部元素样式定义的函数:
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" );
我只是在浏览jQuery。。。看起来它们也会插入样式表值(在本例中不可接受)。不错的解决方案:)而且.attr('style')在jQuery中不包含样式表声明,只包含那些通过文档中的style=“”设置的。等等。。。忽略最后的评论最后一件事。。null大小写(其中getAttribute('style')为null)很漂亮。。我真的很感激。我不太喜欢正则表达式,正则表达式是做什么的?修剪?现在真正的挑战是。。。奇怪的css属性,比如“border”和“border left”。我只是在查看jQuery。。。看起来它们也会插入样式表值(在本例中不可接受)。不错的解决方案:)而且.attr('style')在jQuery中不包含样式表声明,只包含那些通过文档中的style=“”设置的。等等。。。忽略最后的评论最后一件事。。null大小写(其中getAttribute('style')为null)很漂亮。。我真的很感激。我不太喜欢正则表达式,正则表达式是做什么的?修剪?现在真正的挑战是。。。奇怪的css属性,如“border”和“border left”