Javascript 动态更新 CSS - Javascript Update CSS dynamically

Javascript Update CSS dynamically

本文关键字：CSS 更新动态 Javascript | 更新日期: 2023-09-27

我对Javascript很陌生，可以帮忙解决我遇到的小问题。

我有一个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>

谢谢

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

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

我不确定您到底要实现什么，但您的宽度样式应该包含像素：

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

我不知道

为什么你需要JS而不是普通的CSS。正如肯德所说，你可以用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;
}