Question

正如标题所示我正在制作我的第一个响应式设计网站..我有一个图像滑块div，使用像素和媒体查询设置。我想能够访问宽度，所以我可以告诉图像滑块我需要移动多远。不幸的是，媒体查询似乎没有改变HTML。是否有任何变通方法可以获取该信息，以便我可以在javascript中使用它。

这是一个简单的网页示例和JSFiddle http://jsfiddle.net/synthet1c/sNbW9/

感谢您的帮助

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%;
}

<script>

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

</script>

<div id="outer">

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

</div>

Answer 1

element.style对象仅适用于使用style属性设置的属性（如名称所示）。要检索使用样式表设置样式的元素的CSS设置：

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

JS Fiddle demo

参考文献：

element.style。
window.getComputedStyle()。

Answer 2

我为自己制作了一个小片段，因为这是我需要一段时间的功能

var comStyle = function(element , pseudoElt){ 
    if(!pseudoElt){pseudoElt = null} 
    return window.getComputedStyle(document.getElementById(element), pseudoElt); }

这让我想到了......我能改变原型，所以如果element.style.something等于空字符串然后使用getComputedStyle（）从样式表中获取实际值吗？

Answer 3

您不能只使用offsetWidth，它是只读属性，提供元素的宽度作为整数。

var el = document.getElementById('inner')

el.onclick = function(){
      alert(el.offsetWidth)
}

http://jsfiddle.net/t2r7jnb4/

css响应式设计难以使用javascript访问宽度

3 个答案: