Javascript动态更新CSS

我对Javascript很新，可以用一只手解决一个小问题。Javascript动态更新CSS

我有一个PHP脚本，它从一个数据库加载不同数量的图像 - 所有150px宽 - 并在水平行显示它们。如果项目大于标准宽度，我需要能够调整此行的宽度以启用滚动，或者如果滚动条不是滚动条，则需要移除滚动条。

在我的PHP我查询数据库，如果返回的结果集大于0我尝试下面的JavaScript

$width = mysql_num_rows($get) * 150; 
'<script type="text/javascript"> 
     document.getElementById('container').setAttribute('style', 'width: '.$width.''); 
</script>'

容器是由结果集填充控股DIV ID。但我似乎无法动态更新宽度取决于查询的结果。

我的HTML是非常简单的

<div id="container"> 
#Call PHP Function 
</div>

感谢

来源

2013-10-30 Kieran

一nd是否在元素的标记之后在DOM中进一步回应了这段JavaScript？ – adeneo

你在说水平滚动条（从左到右）吗？如果您的内容太宽，浏览器将自行完成。或者你是否希望做某种溢出：滚动？ –

我在div结构关闭后重复了这一点。并希望做一些溢出滚动 – Kieran

你的引号是罪魁祸首，我觉得。

尝试 .setAttribute('style', 'width: '+$width);

来源

2013-10-30 21:02:27 Benjamin

我不知道你想实现什么，但你的宽度风格应该包含像素：

'<script type="text/javascript"> 
    document.getElementById("container").setAttribute("style", "width: '.$width.'px"); 
</script>'

来源

2013-10-30 21:06:32 Krasimir

我不知道为什么你需要JS，而不是简单的CSS 。正如Kender所说你可以用white-space: nowrap;来解决这个问题。

样品

http://jsfiddle.net/8hkLu/

HTML

<div class="myDynRow"> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
</div> 

<div class="myDynRow"> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
    <img src="http://www.whats-your-sign.com/images/ZodiacFlowerRose.jpg" /> 
</div>

CSS

.myDynRow { 
    white-space: nowrap; 
}

来源

2013-10-30 21:09:39 Smamatti

Javascript动态更新CSS

回答

相关问题