立即使用 javascript 设置 HTML 元素宽度属性

Question

是否可以像这样设置元素宽度：

<img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1100px"/>

其中 getScreenSize() 是 javascript function。

        function getScreenSize()
        {
            var res = {"width": 630, "height": 460};

            if (document.body) 
            {
                 if (document.body.offsetWidth)  res["width"]  = document.body.offsetWidth;
                 if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
            }

            if (window.innerWidth)  res["width"]  = window.innerWidth;
            if (window.innerHeight) res["height"] = window.innerHeight;
            alert( res['width'] );

            return res;
        }

还是我必须在 javascript function 中更改 img 的宽度？

function changeImgWidth( img )
{
   img.offsetRight = getScreenWidth()['width'] + "px";
}

Answer 1

你不能用那种语法来做，不。 您可以使用document.write来执行此操作，但我怀疑您最好在 DOM 加载后执行此操作，因为我认为您的getScreenSize function 在那之前可能不会报告正确的结果（但它可能，您必须测试）。

用document.write做到这一点：

<script>
document.write('<img id="backgroundImg" src="images/background.png" alt="" width="' + getScreenSize()['width'] + '" height="1100px"/>');
</script>

要在加载 DOM 后执行此操作，请将其放在页面的最后，就在结束</body>标记之前：

<script>
document.getElementById('backgroundImg').width = getScreenSize()['width'];
</script>

在这两个示例中，我都坚持使用width属性（请注意，您没有使用单位后缀 - “px” - 与width属性一起使用）。 但是您可能会考虑使用 CSS width属性（您可以使用后缀）。

---

不过，退后一步，而不是依靠 JavaScript 来设置宽度，我建议尝试使用 CSS 来设置。 您可以通过在标签中使用style='width: 100%'或：

#backgroundImg {
    width: 100%;
}

...在样式表中。

Answer 2

您不需要在 img-tag 中添加 +px

Answer 3

即使可以这样做，最好不要这样做，因此您可以将内容（HTML）和行为（javascript）分开。 这也是为什么最好不要放的原因

onclick='somefunction(); return false;'

例如，在链接内。 相反，如果你使用 jQuery，例如，你可以把

$('#somelink').click(function() {//do something});

里面一个

$(document).ready(

堵塞。 如果不出意外，您可以将所有 javascript 放在一个地方，而不是分散在标记中的任何地方。 出于同样的原因，CSS 样式表优于内联 styles。