js实现：点击为盒子添加样式。边框和整体样式。

您所在的位置：网站首页 › js边框颜色 › js实现：点击为盒子添加样式。边框和整体样式。

js实现：点击为盒子添加样式。边框和整体样式。

2023-09-06 10:25| 来源: 网络整理| 查看: 265

用 js 给 html 添加 css 样式。

1.添加边框样式。

通过点击盒子次数添加样式和取消样式。

样式和html内容：写到上面。

.box { width: 200px; height: 200px; margin: 100px auto 0; font-size: 24px; border: 4px solid transparent; background-color: #eee; transition: all .3s; display: flex; justify-content: center; align-items: center; } 我是盒子 var _box = document.getElementById('box'); var isShowBorder = false; _box.onclick = function () { if (isShowBorder) { _box.style.border = 'none'; isShowBorder = false; } else { _box.style.border = '2px solid #f00'; isShowBorder = true; } }

进一步优化一下：这样甚至可以添加很多各种样式，也不用写 .style 繁琐

代码：js写在里面。

原理：通过给盒子div 添加一个类名，在css上写具体样式，类名的添加和取消，控制样式的展现与否，达成目标。

Document .box { width: 200px; height: 200px; margin: 100px auto 0; font-size: 24px; border: 4px solid transparent; background-color: #eee; transition: all .3s; display: flex; justify-content: center; align-items: center; } .box-border { font-size: 32px; border-color: #f00; } 我是盒子 function changeBorder() { var _box = document.getElementById('box'); var _box_class = _box.getAttribute('class'); if (_box_class == 'box') { _box.setAttribute('class', 'box box-border'); } else { _box.setAttribute('class', 'box'); } }

【本文地址】

js实现：点击为盒子添加样式。边框和整体样式。

js实现：点击为盒子添加样式。边框和整体样式。

今日新闻

推荐新闻