css响应式设计具有dificulty访问宽度与javascript

正如标题所示，我正在做我的第一个响应式设计网站..我有一个图像滑块div设置使用像素和媒体查询。我希望能够访问宽度，以便我可以告诉图像滑块我需要移动多远。不幸的是，媒体查询似乎没有改变HTML。是否有任何解决方法来获取该信息，以便我可以在JavaScript中使用它。css响应式设计具有dificulty访问宽度与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>

来源

2013-05-10 synthet1c

的element.style对象仅适用于与style属性设置属性（如名称可能暗示）。要为它的风格使用样式表元素集检索CSS设置：

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

JS Fiddle demo。

参考文献：

element.style。
window.getComputedStyle()。

来源

2013-05-10 18:57:38

非常感谢大卫，完美的作品！ – synthet1c 2013-05-10 19:06:56

非常欢迎，我很乐意帮助！ =） – 2013-05-10 19:08:58

我犯了一个小片段为我自己，因为这是我一直需要有一段

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

功能这有我的思想，但...难道我能够改变的原型，所以如果元素.style.something equals和空字符串，然后使用getComputedStyle（）从样式表中获取实际值？

来源

2013-05-12 16:49:43 synthet1c

css响应式设计具有dificulty访问宽度与javascript

回答

相关问题