堆栈内存溢出
  简体   繁体   English

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

[英]How do I change the width of an element using Javascript?

 原文  2011-10-21 16:32:44  2   5    javascript/ html

问题描述

How do I change width value assigned in #center ? 如何更改#center指定的width值？ (I don't want to switch between CSS files just because 1 changed width value.) How do I dynamically change the value using Javascript? （我不想仅仅因为1更改了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>

5 个解决方案

解决方案1
 3 已采纳  2011-10-21 16:37:12

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

解决方案2
 2  2011-10-21 16:35:19

Two possible ways: 两种可能的方式：

  1. Give the element "center" a class value that matches another CSS rule 为元素“center”提供与另一个CSS规则匹配的类值
  2. Alter the "style" property of the element 改变元素的“style”属性

解决方案3
 1  2011-10-21 16:38:31

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

解决方案4
 0  2011-10-21 16:36:01

Call a javascript function in the onclick which takes the dom element and sets the new width OR changes the class of the element 在onclick中调用一个javascript函数，它接受dom元素并设置新的宽度或更改元素的类 

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

解决方案5
 0  2011-10-21 16:37:44

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 JavaScript 或 JQuery 在页面加载时更改 Div 元素的样式宽度？ - How do I change Style Width of Div Element on Page load using JavaScript or JQuery? 如何使用JavaScript更改表格中的列宽？ - How do I change the column width in a table using JavaScript? 如何使用javascript更改元素的属性值 - How do I change the attribute values of an element using javascript 如何更改“ <input> 动态使用Javascript元素？ - How do I change the style of an “<input>” element dynamically using Javascript? 如何使用 JavaScript 更改跨度元素的文本？ - How do I change the text of a span element using JavaScript? 如何使用javascript / jquery更改flexbox元素的宽度 - How to change width in flexbox element using javascript/jquery 如何使用javascript获取div元素的高度和宽度的有用值？ - How do I get a useful value for height and width of a div element using javascript? 在使用Javascript之前，我该如何读取伪元素的height或width属性？ - How do I read the height or width property of pseudo-element :before using Javascript? 如何使用JavaScript获取缩放的SVG元素的宽度？ - How do I get the width of a scaled SVG element with JavaScript? 如何在 JavaScript 中添加或减去元素的宽度 - How do I add or subtract the width of an element in JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM