admin管理员组

文章数量:1287535

How do I change width value assigned in #center? (I don't want to switch between CSS files just because 1 changed width value.) How do I dynamically change the value using Javascript?

<html xmlns="" xml:lang="en" lang="en">
<head>
<style type="text/css">
    #main #center {
        width: 600px; // change width to 700 on click
        float: left;
    }

    #main #center .send {
        background: #fff;
        padding: 10px;
        position: relative;
    }

    #main #center .send .music {
        text-align: center;
        margin-bottom: 10px;
    }

    #main #center .send .write {
        font-family: georgia, serif;
        font-size: 150px;
        opacity: 0.2;
    }

    //....etc.
</style>
</head>

<body>
    // change #center width to 700
    <a href="#go2" onclick="how to change width of #center ???" ></a> 
</body>
</html>

How do I change width value assigned in #center? (I don't want to switch between CSS files just because 1 changed width value.) How do I dynamically change the value using Javascript?

<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
    #main #center {
        width: 600px; // change width to 700 on click
        float: left;
    }

    #main #center .send {
        background: #fff;
        padding: 10px;
        position: relative;
    }

    #main #center .send .music {
        text-align: center;
        margin-bottom: 10px;
    }

    #main #center .send .write {
        font-family: georgia, serif;
        font-size: 150px;
        opacity: 0.2;
    }

    //....etc.
</style>
</head>

<body>
    // change #center width to 700
    <a href="#go2" onclick="how to change width of #center ???" ></a> 
</body>
</html>
  • javascript
  • html
Share Improve this question edited Dec 27, 2011 at 7:22 ThinkingStiff 65.4k30 gold badges147 silver badges241 bronze badges asked Oct 21, 2011 at 16:32 JarMJarM 552 silver badges4 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 5 
document.getElementById('center').style.width = "599px";

Two possible ways:

  1. Give the element "center" a class value that matches another CSS rule
  2. Alter the "style" property of the element
document.getElementById( 'center' ).style.width = "700px";

Call a javascript function in the onclick which takes the dom element and sets the new width OR changes the class of the element

function changeWidth(){
  document.getElementById('center');
  div.style.width="1270px";
}

<div onclick="changeWidth()" id="main">
Stuff
</div>

<div onclick="changeWidth()" id="center">
More Stuff
</div>

function changeWidth(){
   this.style.width = "700px";
}

本文标签： htmlHow do I change the width of an element using JavascriptStack Overflow

版权声明：本文标题：html - How do I change the width of an element using Javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741299541a2371012.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。