Javascript 动态更新 CSS答案

【问题标题】：Javascript Update CSS dynamicallyJavascript 动态更新 CSS
【发布时间】：2013-11-10 16:44:35
【问题描述】：

我对 Javascript 还是很陌生，可以用一只手来解决我遇到的一个小问题。

我有一个 PHP 脚本，它从数据库中加载不同数量的图像 - 全部为 150 像素宽 - 并将它们显示在水平行中。如果项目超过标准宽度，我需要能够调整该行的宽度以启用滚动，或者如果不是，则删除滚动条。

在我的 PHP 中，我查询数据库，如果返回的结果集大于 0，我在 javascript 中尝试以下操作

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

container 是由结果集填充的持有 div ID。但是，我似乎无法根据查询结果动态更新宽度。

我的 HTML 很简单

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

谢谢

【问题讨论】：

在元素标记之后，您是否在 DOM 中进一步回显了那段 javascript？
你说的是水平滚动条（从左到右）吗？如果您的内容太宽，浏览器会自行完成。还是您希望做某种溢出：滚动？
我在 div 结构关闭后回应了这一点。并希望用溢出滚动做点什么

标签： javascript php html css dynamic

【解决方案1】：

我认为你的引号是罪魁祸首。

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

【讨论】：

【解决方案2】：

我不确定你到底想达到什么目的，但你的宽度样式应该包含像素：

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

【讨论】：

【解决方案3】：

我不知道你为什么需要 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;
}

【讨论】：