javascript HTML中的样式宽度与宽度属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26373726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
style width vs width attribute in HTML
提问by Manku
I saw last post similar to my question HTML5 canvas style height vs attribute height
But in that post, there was no clear information regarding which one will work and what is the difference?
我看到上
一篇类似于我的问题HTML5 画布样式高度与属性高度的
帖子但是在那篇帖子中，没有明确的信息说明哪个可以工作，有什么区别？
I tried following example:
我尝试了以下示例：
<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>
But in above example, if put either style="width: 200px"or width="200px", same result is not seen.
但在上面的例子中，如果设置style="width: 200px"或width="200px"，则不会看到相同的结果。
Question:
1) why are style="width: 200pxand width="200pxnot giving same result?
2) what is the difference between width="200px"or width="200"?
问题：
1）为什么style="width: 200px和width="200px没有给出相同的结果？
2) width="200px"或width="200" 有什么区别？
Can some help me to clear these basics?
有人可以帮助我清除这些基础知识吗？
回答by creeper
For most html elements, widthattribute has nothing to do with the element's width. What defines an element's style(certainly contain width) is the element's styleattribute.
对于大多数 html 元素，width属性与元素的宽度无关。定义元素样式（当然包含width）的是元素的style属性。
In other words, the style.width(style="width: 200px;") attribute determines the element's width.
换句话说，style.width( style="width: 200px;") 属性决定了元素的宽度。
But some elements like canvas, svg, the widthattribute will determines the element's width, if you don't set style.widthattribute. In this case, width="200px"is the same as width="200"because most browsers use the pxas default unit.
但是有些元素，如canvas, svg，width如果不设置style.width属性，则该属性将决定元素的宽度。在这种情况下，width="200px"与width="200"大多数浏览器使用px作为默认单位相同。
PS:
PS：
- The
widthis invalid to set theselect's width. - But the
widthattribute is valid. You can access it and change it with freedom. You can use it to do other things.
- 在
width是无效的设置select的宽度。 - 但该
width属性是有效的。您可以自由访问和更改它。你可以用它来做其他事情。
回答by Jukka K. Korpela
The widthattribute is invalid in a selectelement. What matters more, this restriction is imposed by browsers: they ignore the attribute. (Long time ago, Netscape 4 supported it, and it was described in the HTML 3.0 draft, which expired in 1995. Some legacy code, maybe even legacy coding practices, may stillreflect such things!)
该width属性在select元素中无效。更重要的是，此限制是由浏览器强加的：它们忽略该属性。（很久以前，Netscape 4 支持它，它在 HTML 3.0 草案中有所描述，该草案于 1995 年到期。一些遗留代码，甚至可能遗留的编码实践，可能仍然反映了这样的事情！）
So answer is simple: they differ so that the widthattribute in HTML has no effect (so the element takes its default width), whereas the widthproperty in CSS works in the normal CSS way.
所以答案很简单：它们不同，因此widthHTML中的属性不起作用（因此元素采用其默认宽度），而widthCSS 中的属性以正常的 CSS 方式工作。
The widthattribute is not a general attribute in HTML: it is allowed for a certain set of elements and defined individually for them.
该width属性不是 HTML 中的通用属性：它允许用于特定的元素集并为它们单独定义。
回答by Edwin
1) <select style="width: 200px">stylehere is the attribute of <select>HTML element, what is written inside the quote isCSS code. Likewise, <select width="200px">widthhere is the attribute of <select>. However,<select>tag doesn't have widthattribute see here(under attributes) More information on HTML attributes: here
1）这里的<select style="width: 200px">style是<select>HTML元素的属性，引号里面写的是CSS代码。同样，这里的<select width="200px">宽度是 的属性<select>。但是，<select>标签没有width属性，请参阅此处（下attributes）有关以下内容的更多信息HTML attributes：此处
see DEMO
看演示
2) width="200"is equivalent to width="200px"
2)width="200"等价于width="200px"
