2016-04-29 10 views
2

は、私は次のようなマークアップしている:javascriptでスタイルプロパティの初期値を取得するには?私のHTMLファイルに

:私のように変数を作ったJavaScriptファイルで

.long_box { 
    width: 3300px; 
    height: 768px; 
    position: absolute; 
    left: 10px; 
    top: 0; 
} 

:私は、次のスタイル規則を適用したCSSファイルで

<div class="long_box"> 
    <div class="image1"> <img src="images/image1.png"> </div> 
    <div class="image2"> <img src="images/image2.png"> </div> 
    <div class="image3"> <img src="images/image3.png"> </div> 
</div> 

var longbox = document.getElementsByClassName("long_box")[0]; 

今私はlongbox.style.left、I gとlong_boxleftの初期値をリコールしようとすると、空の文字列""。しかし、私がleft値をjavascriptで変更した後、例えばlongbox.style.left = 100 + 'pxのようにして、その値を呼び出すと、コンソールに100pxが表示されます。だから、

どのようにJavaScriptのスタイルプロパティの初期値を取得するには?

+0

を使用する必要があるだろうか?あなたは "初期値"のCSS定義、または何か他のものを意味しますか? – BoltClock

+0

attr()を使って値 –

+0

@BoltClockを取得しようとすることができます。初期値では、後でjavascriptによって変更される可能性のあるcssファイルに割り当てられた値を意味します。そして、それらを変更した後、私はどうにかそれらにアクセスできます - おそらく 'this.style.left = 100 + 'px''がインラインスタイルを追加するからです。 – user31782

答えて

7

ジャバスクリプトelement.styleのみインラインスタイルを返しますが、他のスタイルのために、スタイルシートで設定され、たとえば、あなたは、「初期値」とはどういう意味ですかgetComputedStyle

var longbox = document.getElementsByClassName("long_box")[0]; 

var styles = window.getComputedStyle(longbox); 

var lef  = styles.getPropertyValue("left"); 
+0

私は好奇心が強いです。 'inline styles'を参照すると、HTML上に直接あるスタイルを意味しますか? –

+0

はい、javascriptは要素に直接インラインスタイルを設定します – adeneo

+0

'longbox.style = getComputedStyle(longbox)'を定義できますか? – user31782