通过js代码来改变div的宽度

更新日期: 2019-07-19阅读: 2.8k标签: 宽高分享

复制链接

新浪微博

QQ 好友

扫一扫分享

当做网页图片的切换时，有的做法是将两个div并排在一起，但是只能显示一个div的宽度，当要切换图片时将一个div的宽度从一个宽度值改为0，就实现了简单的图片替换了。首先，我们将要更改宽度的div摆上来

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
         #ddd{
            background-color: red;
         }
    </style>
</head>
<body>
    <div id= "ddd" style="width:800px;height:500px"></div>
    <button onClick="change();" type="button" class="slick-prev slick-arrow" >button</button>
</body>
</html>

一个背景颜色为红色的div，使用按钮来改变大小然后我们需要加上一段js代码，来修改掉这个div的大小

<script>
function change() {
var mywidth=document.getElementById("ddd").clientWidth;
if(mywidth!="100")
{
ddd.style.width=(mywidth-700)+"px";
}else
{
ddd.style.width=(mywidth+700)+"px";
}
alert(mywidth.style.width);
}
</script>

改变高度同理，下面是测试完整代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
         #ddd{
            background-color: red;
         }
    </style>
	<script>
function change() {
var mywidth=document.getElementById("ddd").clientWidth;
if(mywidth!="100")
{
ddd.style.width=(mywidth-700)+"px";
}else
{
ddd.style.width=(mywidth+700)+"px";
}
alert(mywidth.style.width);
}
</script>
</head>
<body>
    <div id= "ddd" style="width:800px;height:500px"></div>
    <button onClick="change();" type="button" class="slick-prev slick-arrow" >button</button>
</body>
</html>

链接: https://www.fly63.com/article/detial/4248

通过js代码来改变div的宽度

js获取元素，页面，屏幕，浏览器的宽度、高度方法总汇

css实现左边定宽右边自适应的5种方法总汇

理解css中min-width和max-width，width与它们之间的区别联系

css中input与button在一行高度不一致的解决方法

css中width为auto或者100%的区别

js获取浏览器/界面宽高的问题_以及兼容性实现方案

基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

css中设置了宽度，div内容溢出不换行的的原因和解决方法

css保持div等高宽比

js动态获取浏览器或页面等容器的宽高