1

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

ありがとう

4

5 に答える 5

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
于 2009-01-24T22:12:35.323 に答える
1

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

于 2009-01-24T22:09:34.440 に答える
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;
}

パオロの関数を使用して、スタイルの配列を生成できます。

于 2009-01-24T22:51:35.807 に答える
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 != "");

少し長いようですが、これが私が思いつく最善の (そして最短の) 解決策です。

于 2009-01-24T22:13:03.577 に答える