Javascript HTML中的样式宽度与宽度属性_Javascript_Jquery_Css_Html

Javascript HTML中的样式宽度与宽度属性

javascript jquery css html

Javascript HTML中的样式宽度与宽度属性,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我看到了与我的问题类似的最后一篇帖子但在那篇文章中，没有明确的信息说明哪一个会起作用，有什么区别 <html> <head> </head> <body> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src

我看到了与我的问题类似的最后一篇帖子
但在那篇文章中，没有明确的信息说明哪一个会起作用，有什么区别

<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>

我尝试了以下例子：

<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>


测试1
测试2
测试3
测试4
测试5

但在上面的示例中，如果放置style=“width:200px”或width=“200px”，则看不到相同的结果

<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>

问题：
1）为什么style=“width:200px和width=“200px没有给出相同的结果？
2） width=“200px”与width=“200”之间有什么区别

<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>

有人能帮我弄清楚这些基础吗

1）

样式这里是

HTML元素的属性，引号中写的是。同样地，

宽度这里是

的属性。但是，

标记没有

宽度

属性请参见（在

属性

下）有关

HTML属性

的更多信息：

<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>

看

<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>

2）

width=“200”

相当于

width=“200px”

对于大多数html元素，

width

属性与元素的宽度无关。定义元素样式（当然包含

宽度

）的是元素的

样式

属性

<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

（

style=“width:200px；”

）属性确定元素的宽度

<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>

但是一些元素，如

canvas

，

svg

，如果不设置

style.width

属性，则

width

属性将确定元素的宽度。在这种情况下，

width=“200px”

与

width=“200”

相同，因为大多数浏览器使用

px

作为默认单位

<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>

附言：

<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>

```
宽度
```
对于设置
```
选择的宽度无效
```


但是width
属性是有效的。你可以自由地访问和更改它。你可以用它做其他事情

元素中的width
属性无效。更重要的是，这种限制是由浏览器强加的：它们忽略属性。（很久以前，Netscape 4支持它，在1995年到期的HTML3.0草案中对其进行了描述。一些遗留代码，甚至可能是遗留编码实践，可能仍然反映了这些情况！）
<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>        

所以答案很简单：它们不同，因此HTML中的width
属性没有效果（因此元素采用其默认宽度），而CSS中的width
属性以正常的CSS方式工作
<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>        

width
属性不是HTML中的常规属性：它允许某些元素集使用，并为它们单独定义。
关于应用于
元素时的差异。对于具有width属性的元素，例如
，宽度将用HTML呈现。如果该元素具有CSS宽度属性，则在应用CSS时将呈现宽度。width
和height
属性似乎主要是CSS出现之前旧式HTML以及内容和样式分离概念的遗留物。将来可能会从现代HTML规范中删除HTML宽度/高度属性。@misterManSam：谢谢，我选中了“选择大小属性”与“样式大小”。但使用style=“size:2”和size=“2”的结果不同。若它们在样式中添加了属性，为什么它们并没有给出相同的结果？CSS中并没有“size”属性。这是一个HTML属性，用于确定应显示多少个选项@利曼塔拉：我试过你的例子，用尺寸代替宽度，但我没有得到同样的结果。我还是很困惑，有什么区别？也请考虑参考和链接到W3Sub以外的一个来源。对于“选择元素”属性和一般的HTML属性。是一个维护良好的奇妙资源。@Manku您期望得到什么结果style=“width:200px”
是CSS，而width=“200px”是HTML（不适用于所有标记）@Manku-select HTML元素的关键区别在于它没有width属性。宽度不是其中之一。@Limantara，@misterManSam:我在HTML中使用了直接属性声明和样式的双重用法，我无法找到它们之间的区别。未为选择标记定义“检查宽度”属性。因此，我尝试了使用size属性选择的示例。但使用style=“size:2”和size=“2”的结果不同。为什么这些结果不一样？问题是为什么在使用样式和直接属性时会出现差异？+1用于提及画布@Manku我还想补充一点，它们之间有一个恼人的区别——在画布上，如果设置了width属性，它会像预期的那样工作（例如，你可以看到更多的画布），但是如果你设置了width样式（例如style=“width:123px”），那么它只会拉伸它，所以你会觉得它像一个糟糕的缩放。
<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>