JS轻松实现CSS设置,DIV+CSS常用CSS设置

JS轻松实现CSS设置

为了实现JS轻松设置CSS，需要了解以下知识点：

1.获取元素：使用document.getElementById()方法获取需要操作的元素。

2.修改属性：通过修改获取到的元素的属性来实现CSS设置。

代码示例：

<div id="example" style="color: red;">这是一段文本</div>
<button onclick="changeColor()">更改颜色</button>

<script>
function changeColor() {
  var element = document.getElementById("example");
  element.style.color = "blue";
}
</script>

运行上述代码，点击按钮后，文本颜色会从红色变为蓝色。

DIV + CSS 常用 CSS 设置

DIV和CSS可以实现众多的HTML布局，下面列举了一些常用CSS设置。

1.设置宽高：通过设置width和height属性来设置DIV的宽度和高度。

div {
  width: 200px;
  height: 200px;
  background-color: red;
}

2.设置边框：通过设置border属性来设置DIV的边框。

div {
  border: 1px solid black;
}

3.设置圆角：通过设置border-radius属性来设置DIV的圆角。

div {
  border-radius: 10px;
}

4.设置阴影：通过设置box-shadow属性来设置DIV的阴影。

div {
  box-shadow: 5px 5px 5px grey;
}

示例代码：

<div class="box">这是一个DIV</div>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 5px 5px 5px grey;
}
</style>

上述代码设置了一个具有圆角和阴影的DIV框和红色背景，可以按需调整属性值实现不同的布局效果。

通过学习以上内容，我们可以在开发和设计中更加灵活地使用CSS和JS，实现更加多样化的页面效果。