Question

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

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

在我的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>

由于

Answer 1

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

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

Answer 2

我不确定你想要实现的是什么，但你的宽度样式应该包含像素：

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

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

Javascript动态更新CSS

3 个答案: