如何使用Javascript更改元素的宽度？

Question

如何使用Javascript更改元素的宽度？

4

我该如何更改#center中分配的width值？（我不想仅仅因为一个width值的变化就在CSS文件之间切换。）我该如何使用Javascript动态更改该值？

<html xmlns="http://www.w3.org/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>

- JarM

5个回答

2

document.getElementById( 'center' ).style.width = "700px";

- ThinkingStiff

2

两种可能的方法：

为元素“center”赋予与另一个CSS规则匹配的类值
修改元素的“style”属性

- Pointy

0

在onclick中调用一个JavaScript函数，该函数接受dom元素并设置新宽度或更改元素的类

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

- Garbit

0

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

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

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

- Gabe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blazemonger · Accepted Answer

document.getElementById('center').style.width = "599px";