gpt4 book ai didi

javascript - HTML 中的样式宽度与宽度属性

转载 作者:太空狗 更新时间:2023-10-29 16:06:43 26 4
gpt4 key购买 nike

我看到了与我的问题相似的最后一篇帖子 HTML5 canvas style height vs attribute height
但是在那篇文章中,没有明确的信息说明哪一个会起作用,有什么区别?

我尝试了以下示例:

<html>
<head>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="jquery-1.11.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="script.js"></script>

<div>
<select style="width: 200px" width="200px">
<option value="Test1"> Test1 </option>
<option value="Test2"> Test2 </option>
<option value="Test3"> Test3</option>
<option value="Test4"> Test4 </option>
<option value="Test5"> Test5 </option>
</select>
</div>
</body>
</html>

但在上面的示例中,如果放置style="width: 200px"width="200px",则不会看到相同的结果。

问题:
1) 为什么 style="width: 200pxwidth="200px 没有给出相同的结果?
2) width="200px"width="200" 有什么区别?

有人可以帮助我清除这些基础知识吗?

最佳答案

对于大多数 html 元素,width 属性与元素的宽度无关。定义元素样式(当然包含width)的是元素的style属性。

换句话说,style.width(style="width: 200px;") 属性决定了元素的宽度。

但是有些元素比如canvas, svg, width 属性会决定元素的宽度,如果你不设置 style.width 属性。在这种情况下,width="200px"width="200" 相同,因为大多数浏览器使用 px 作为默认单位。

附言:

  • width 设置select 的宽度无效。
  • 但是 width 属性是有效的。您可以自由访问和更改它。你可以用它来做其他事情。

关于javascript - HTML 中的样式宽度与宽度属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26373726/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com