要素のインラインスタイリングの読み方

Question

HTML要素に起因するインラインスタイルを特定できるかどうかを知りたい。値を取得する必要はありませんが、インラインに設定されているかどうかを検出するだけです。

たとえば、HTMLが次の場合：

<div id="foo" style="width: 100px; height: 100px; background: green;"></div>

width、height、およびbackgroundがインラインで明示的に宣言されていることを確認するにはどうすればよいですか？

私が知る限り、解決策は2つの方法で機能します。特定の属性が設定されているかどうかを確認して、trueまたはfalseを通知するか、設定されているすべての属性を通知することができます。そのように：

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ソースを制御できません。

ありがとう

Answer 1

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

Answer 2

HTML要素のスタイルプロパティは、すべてのプロパティをリストするスタイルオブジェクトを返します。インラインスタイル属性に値（nullまたは空の文字列以外）が設定されています。

Answer 3

次のようなことを試してください：

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 != "");

少し長いように見えますが、これは私が思いつくことができる最高の（そして最短の）解決策です。

Answer 4

特定のスタイリング属性が存在するかどうかを確認しようとしていますか、または可能な属性のリストだけが必要ですか？ すでに属性がわかっている場合は、使用することができます

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の関数を使用して、スタイルの配列を生成できます。