改变方块样式

使用JavaScript动态改变HTML元素样式

原创已于 2022-03-13 10:47:18 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

于 2022-03-13 08:27:33 首次发布

本文通过一个简单的实例展示了如何使用JavaScript动态修改HTML元素的宽度、高度、背景颜色、边框和圆角。读者将学习到如何获取元素ID、绑定点击事件以及更新样式属性，以实现图形的实时变化。

部署运行你感兴趣的模型镜像

内容;

今天我们来做一个超简单的案例，这个案例简单就是修改里面的：宽度、高度、背景颜色、边框、圆角，然后点击运行，接着右边的图形作出相应的改变。

代码

1.HTML:首先需要设置要改变的属性值，改变属性的按钮，改变图形的样式，看个人爱好可以设置背景图片，为它们设置类名以及ID名以方便后面的JavaScript获取使用；这样我们的HTML就算完成了。

<body>

</div>

</div>

</body>

2.CSS：为了让整个页面变的好看可以根据自己需求加上不同的图片当作壁纸，然后我们要开始对我们的输入框（例如方块要改变的属性值，点击改变的按钮）、方块的样式进行调整使其更加美观。

<style>

.set_con{

width:900px;

height:350px;

border:1px solid #666;

margin:50px auto 0;

background: url(./59473bd1ecce7.jpg) -350px -75px;

}

.left_set{

width:299px;

float:left;

height:330px;

padding-top:20px;

}

.left_set label{

float:left;

width:80px;

height:40px;

line-height:40px;

text-align:left;

text-indent:20px;

margin-top:10px;

font-size:12px;

font-weight: bold;

}

.left_set input{

padding:0px;

width:198px;

height:38px;

border: 1px solid #999;

float:left;

margin-top:10px;

text-indent:10px;

outline:none;

}

.left_set .setbtn{

width:99px;

height:40px;

border:0px;

background:#0181cc;

color:#fff;

text-indent:0px;

margin-left:80px;

font-size:16px;

margin-top:20px

}

.right_show{

width:600px;

height:350px;

float:left;

overflow:auto;

}

.box{

width:100px;

height:100px;

border: 5px solid #000;

background:gold;

margin:50px auto 0;

}

</style>

3.JavaScript：我们还是先给运行按钮一个“id”，然后获取到元素，然后绑定这个按钮的点击事件（onclick）。
然后获取另外六个元素，获取五个输入框的时候，我们注意在后面要加上“.value”这个属性，这个能获取的是文本框里的内容属性，然后就是获取到我们要操作的图形“box1”。
接着就是将我们box1的属性等于我们的相应输入框的内容就可以了。

4.如果我们需要绑定的是字体大小，我们就修改box1的字体样式：box1.style.font-size = “...”。相反其他的属性也是这样子绑定。

var input06 = document.getElementById("input06");

input06.onclick = function(){

var input01 = document.getElementById("input01").value;

var input02 = document.getElementById("input02").value;

var input03 = document.getElementById("input03").value;

var input04 = document.getElementById("input04").value;

var input05 = document.getElementById("input05").value;

var input06 = document.getElementById("input06").value;

var box1 = document.getElementById("box1");

box1.style.width = input01;

box1.style.height = input02;

box1.style.backgroundColor = input03;

box1.style.border = input04;

box1.style.borderRadius = input05;

}

</script>

小结：此案例使用到的开发软件为Visual Studio Code，技术主要用到了JavaScript，主要为正确的获取ID名以及利用获取到的元素带入得以更改属性值。

这是我所学到的JavaScript案例，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

您可能感兴趣的与本文相关的镜像

Yolo-v8.3

Yolo

YOLO（You Only Look Once）是一种流行的物体检测和图像分割模型，由华盛顿大学的Joseph Redmon 和Ali Farhadi 开发。 YOLO 于2015 年推出，因其高速和高精度而广受欢迎