javascript - style width vs width attribute in HTML

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?

I tried following example:

<html>
    <head>
    </head>
      <body>
        <link rel="stylesheet" href=".11.1/themes/smoothness/jquery-ui.css">
        <script src="jquery-1.11.1.js"></script>
        <script src=".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.

Question:
1) why are style="width: 200px and width="200px not giving same result?
2) what is the difference between width="200px" or width="200"?

Can some help me to clear these basics?

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?

I tried following example:

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

Question:
1) why are style="width: 200px and width="200px not giving same result?
2) what is the difference between width="200px" or width="200"?

Can some help me to clear these basics?

Share edited May 23, 2017 at 11:47 CommunityBot 11 silver badge asked Oct 15, 2014 at 2:53 Manku 4713 gold badges9 silver badges17 bronze badges

Here is a related question regarding the difference when applied to the <img> element. – misterManSam Commented Oct 15, 2014 at 3:31
On elements that have a width attribute, such as <img>, the width will be rendered with the HTML. If that element has a CSS width property instead, the width will be rendered when the CSS is applied. The width and height attributes seem to be mainly leftovers from old school HTML before the arrival of CSS and the concept of the separation between content and style. It is possible that in the future the HTML width / height attributes will be removed from the modern HTML spec. – misterManSam Commented Oct 15, 2014 at 4:00
@misterManSam: Thanks, I checked select with size attribute vs style size. But result are not same using style="size:2" and size="2". if they added attribute in style, Why are these not giving same result? – Manku Commented Oct 15, 2014 at 4:07
There is no "size" property in CSS. This is an HTML attribute that determines how many options should be shown. Like in this example – misterManSam Commented Oct 15, 2014 at 4:10

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

For most html elements, width attribute has nothing to do with the element's width. What defines an element's style(certainly contain width) is the element's style attribute.

In other words, the style.width(style="width: 200px;") attribute determines the element's width.

But some elements like canvas, svg, the width attribute will determines the element's width, if you don't set style.width attribute. In this case, width="200px" is the same as width="200" because most browsers use the px as default unit.

PS:

The width is invalid to set the select's width.
But the width attribute is valid. You can access it and change it with freedom. You can use it to do other things.

The width attribute is invalid in a select element. 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 still reflect such things!)

So answer is simple: they differ so that the width attribute in HTML has no effect (so the element takes its default width), whereas the width property in CSS works in the normal CSS way.

The width attribute is not a general attribute in HTML: it is allowed for a certain set of elements and defined individually for them.

1) <select style="width: 200px"> style here is the attribute of <select> HTML element, what is written inside the quote is CSS code. Likewise, <select width="200px"> width here is the attribute of <select>. However,<select> tag doesn't have width attribute see here (under attributes) More information on HTML attributes: here

see DEMO

2) width="200" is equivalent to width="200px"

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - style width vs width attribute in HTML - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)