HTML DOM Object Width Property

HTMLWeb DevelopmentFront End Technology

<p>The HTML DOM Object Width property is used to set or return the width of an object. This width is set in pixels. Following is the syntax to set the width of an object &minus;</p><pre class="result notranslate">objObject.width</pre><p>Following is the syntax to return the width of an object &minus;</p><pre class="result notranslate">objObject.width = pixels</pre><p>Above, pixels is the value set for the width of object.</p><p>Let us now see an example to implement the DOM object width property &minus;</p><h2>Example</h2><p><a class="demo" href="" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &nbsp; &nbsp;&lt;object id=&quot;newObj&quot; width=&quot;300&quot; height=&quot;200&quot; &nbsp; &nbsp; &nbsp; data=&quot;; style=&quot;border:2px solid red&quot;&gt; &nbsp; &nbsp; &nbsp;&lt;/object&gt; &nbsp; &nbsp;&lt;p&gt;Click to update the width.&lt;/p&gt; &nbsp; &nbsp;&lt;button onclick=&quot;display()&quot;&gt;Update Width&lt;/button&gt; &nbsp; &nbsp;&lt;p id=&quot;myid&quot;&gt;&lt;/p&gt; &nbsp; &nbsp;&lt;script&gt; &nbsp; &nbsp; &nbsp; function display() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById(&quot;newObj&quot;).width = &quot;550&quot;; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p><img src="" class="fr-fic fr-dib" style="width600px; height:316px; border:1px solid black;" width="600.011364" height="316"></p><p>Now, click the &ldquo;Update Width&rdquo; button to update the width &minus;</p><p><img src="" class="fr-fic fr-dib" style="width:600px; height:329px; border:1px solid black;" width="600" height="329"></p>
Updated on 29-Jun-2020 09:26:38