0

初めてレスポンシブ デザインの Web サイトを作成しています。ピクセルとメディア クエリを使用して設定された画像スライダー div があります。幅にアクセスできるようにしたいので、画像スライダーにどこまで移動する必要があるかを伝えることができます。残念ながら、メディア クエリは HTML を変更しないようです。JavaScriptで使用できるように、その情報を取得するための回避策はありますか。

これは、遊ぶための簡単なWebページの例とJSFiddle http://jsfiddle.net/synthet1c/sNbW9/です

<!doctype html>
<html>

<head>

<style>

    body{
        position:absolute;
        background:red;
        width:100%;
        height:100%;
    }

    #outer{
        position:absolute;
        width:80%;
        height:80%;
        background:red;
        background-image:url('http://www.largepictures.net/largepictures/scenery/largepictures_scenery_large_3066.jpg');
        background-position: center;
        margin:auto;
    }

    #inner{
        width:80%;
        height:80%;
        background:rgba(255,0,0,0.3)
        margin:auto;
        margin-top:5%;
    }

</style>

    <script>

    document.getElementById('inner').onclick = function(){
        alert(document.getElementById('inner').style.width);
    }

    </script>   

</head> 

<body>

    <div id="outer">

        <div id="inner">click the box to get width</div>

    </div>

</body>
</html>
4

3 に答える 3

1

オブジェクトは、属性element.styleで設定されたプロパティでのみ使用できstyleます (名前が示すように)。スタイルシートを使用してスタイルが設定されている要素の CSS 設定を取得するには:

document.getElementById('inner').onclick = function(){
    alert(window.getComputedStyle(document.getElementById('inner'), null).width);
}

JS フィドルのデモ。

参考文献:

于 2013-05-10T18:57:38.037 に答える