2

要素にインライン スタイルを定義しました

<div id="box" style="-ms-grid-row:1; background-color: yellow;"></div>

そしてJavaScriptでスタイルを設定したい。

var box = document.getElementById('box');
box.innerHTML += '<br>before: ' + box.getAttribute('style');
box.style.height = '100px';
box.innerHTML += '<br>after: ' + box.getAttribute('style');

出力は次のようになります。

before: -ms-grid-row:1; background-color: yellow;
after: background-color: yellow; height: 100px;

テストhttp://jsfiddle.net/P7eBN/

-ms-grid-row プロパティを使用してインライン スタイルを読み取るプラグインを作成しているため、ブラウザーは -ms-grid-row プロパティを削除しました。jQueryを使用する場合も同じです。$(box).height(100)

ユーザーがstyle.heightで高さを設定できるようにするにはどうすればよいですか?

4

4 に答える 4

3

-ms-grid-row プロパティを使用してインライン スタイルを読み取るプラグインを作成しているため、-ms-grid-row を何らかの方法で保持する必要があります。データ属性の仕事のように聞こえます：

<div id="box" data-ms-grid-row="1" style="background-color: yellow;"></div>

そして、プラグインはそれを（クロスブラウザーの方法で）読み取ります

box.getAttribute('data-ms-grid-row')

または最新のブラウザーの場合:

box.dataset.msGridRow
于 2013-03-28T07:40:50.480 に答える
2

これはどうですか？

var box = document.getElementById('box');
box.innerHTML += '<br>before: ' + box.getAttribute('style');
box.setAttribute('style', box.getAttribute('style') + ' height : 100px;');
box.innerHTML += '<br>after: ' + box.getAttribute('style');
于 2013-03-28T07:39:10.117 に答える
1

CSS スタイルを記述すると、ブラウザーによってフィルタリングされ、要素に適用されます。たとえば、次の CSS を記述します。

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Chrome 開発者ツールで調べると、表示されるだけ-webkit-border-radius: 5px;で他は適用されません。

解決

data-HTML をまともなバージョンのブラウザーに提供していると仮定すると、属性を利用できます。この方法でスタイルを両方に送信します。

style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"
data-style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"

そして今、あなたはdata-style代わりに、を読んでいますstyle。最終的なコードは次のようになります。

var box = document.getElementById('box');
box.innerHTML += '<br>before: ' + box.getAttribute('data-style');
box.setAttribute('style', box.getAttribute('style') + '; height : 100px');
box.innerHTML += '<br>after: ' + box.getAttribute('data-style');
于 2013-03-28T07:37:13.990 に答える
0

あなたのページを Internet Explorer 9 で試してみましたが、プロパティは期待どおりに保持されていました。-ms- プレフィックスは、Internet Explorer 以外のブラウザーでは無視されます。したがって、あなたはそれを見ることができません。

于 2013-03-28T08:21:14.487 に答える