怎么在javaScript中设置css不可见（javascript 设置css）

在Web开发中，CSS是不可或缺的一部分。通过CSS，我们可以为网页添加各种样式和布局效果。而JavaScript则是用于实现交互功能的脚本语言。在JavaScript中，我们可以通过设置CSS来控制页面元素的显示与隐藏。

一、如何在JavaScript中设置CSS不可见

1.使用style.display属性

要想在JavaScript中设置CSS不可见，最常用的方法就是使用style.display属性。该属性可以用来控制元素的显示方式，包括“block”、“inline”、“none”等多种选项。其中，“none”表示元素不可见，也就是隐藏起来了。

下面是一个简单的例子，演示如何使用style.display属性隐藏一个div元素：

```html

设置CSS不可见

#myDiv {

width: 200px;

height: 200px;

background-color: red;

}

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

myDiv.style.display = "none";

```

在上面的代码中，我们首先定义了一个id为“myDiv”的div元素，并设置了它的样式。接着，在JavaScript中获取这个元素的引用，并将其style.display属性设置为“none”，从而使其不可见。

2.使用className属性

除了使用style.display属性外，我们还可以使用className属性来设置CSS不可见。该属性可以用来修改元素的class属性，从而改变元素的样式。

下面是一个示例，展示如何使用className属性隐藏一个div元素：

```html

设置CSS不可见

.hidden {

display: none;

}

#myDiv {

width: 200px;

height: 200px;

background-color: red;

}

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

myDiv.className = "hidden";

```

在上面的代码中，我们首先定义了一个名为“hidden”的CSS类，其中设置了display属性为“none”。接着，在JavaScript中获取id为“myDiv”的div元素，并将其className属性设置为“hidden”，从而使其应用了“hidden”类的样式，从而实现了隐藏效果。

二、JavaScript设置CSS

除了设置CSS不可见外，JavaScript还可以用来设置各种CSS属性。下面是一些常见的CSS属性及其对应的JavaScript设置方式：

1.设置元素的背景颜色：

```javascript

document.getElementById("myDiv").style.backgroundColor = "red";

```

2.设置元素的宽度和高度：

```javascript

document.getElementById("myDiv").style.width = "200px";

document.getElementById("myDiv").style.height = "200px";

```

3.设置元素的字体大小：

```javascript

document.getElementById("myDiv").style.fontSize = "16px";

```

4.设置元素的边框：

```javascript

document.getElementById("myDiv").style.border = "1px solid black";

```

5.设置元素的位置：

```javascript

document.getElementById("myDiv").style.position = "absolute";

document.getElementById("myDiv").style.left = "100px";

document.getElementById("myDiv").style.top = "100px";

```

总结：

在Web开发中，CSS和JavaScript是两个非常重要的技术。通过设置CSS不可见和JavaScript设置CSS，我们可以实现各种交互效果和动态样式。熟练掌握这些技术，可以让我们的网页更加生动有趣，用户体验更加优秀。