js和css结合的例子

js和css结合的例子JavaScript（JS）和CSS（CascadingStyleSheets）是前端开发中常用的两种技术。JS用于处理网页的交互和动态行为，而CSS则用于控制网页的样式和布局。结合使用这两种技术可以实现更加丰富和动态的用户界面效果。下面将介绍一些常见的JS和CSS结合的例子，并说明相关参考内容。

1.动态改变元素样式

通过JS可以实时改变元素的CSS样式，实现一些动态效果，比如鼠标悬停时改变字体颜色、点击时显示和隐藏元素等。在JS中可以使用`style`属性来控制元素的CSS属性。以下代码示例使用onclick事件来切换元素的可见性：

HTML:

```html

<buttononclick="toggleVisibility()">切换可见性</button>

<divid="content"style="display:none;">我是一个隐藏的元素</div>

```

JavaScript:

```javascript

functiontoggleVisibility(){

varcontent=document.getElementById("content");

if(content.style.display==="none"){

content.style.display="block";

}else{

content.style.display="none";

}

}

```

参考内容：

-[MDNWeb文档：CSSdisplay属性](/zh-CN/docs/Web/CSS/display)

-[MDNWeb文档：Element.styleproperty](/zh-CN/docs/Web/API/HTMLElement/style)

2.动态添加和删除CSS类

通过JS可以动态添加或删除元素的CSS类，以应用不同的样式。这可以用于实现一些动画效果，比如点击按钮时元素逐渐淡入等。以下代码示例使用onclick事件来添加和删除CSS类：

HTML:

```html

<buttononclick="toggleAnimation()">切换动画</button>

<divid="element">我是一个元素</div>

```

CSS:

```css

.animated{

opacity:0;

transition:opacity1s;

}

.visible{

opacity:1;

}

```

JavaScript:

```javascript

functiontoggleAnimation(){

varelement=document.getElementById("element");

if(element.classList.contains("visible")){

element.classList.remove("visible");

}else{

element.classList.add("visible");

}

}

```

参考内容：

-[MDNWeb文档：Element.classList属性](/zh-CN/docs/Web/API/Element/classList)

-[MDNWeb文档：CSSopacity属性](/zh-CN/docs/Web/CSS/opacity)

-[MDNWeb文档：CSStransition属性](/zh-CN/docs/Web/CSS/transition)

3.响应式布局

通过JS和CSS结合可以实现响应式布局，使网页在不同设备和屏幕尺寸下呈现不同的布局和样式。以下代码示例演示如何使用JS来根据屏幕宽度动态改变元素的样式：

HTML:

```html

<divid="element">我是一个元素</div>

```

CSS:

```css

@media(max-width:600px){

#element{

font-size:14px;

}

}

@media(min-width:601px)and(max-width:1200px){

#element{

font-size:18px;

}

}

@media(min-width:1201px){

#element{

font-size:24px;

}

}

```

JavaScript:

```javascript

functionupdateFontSize(){

varelement=document.getElementById("element");

varwidth=window.innerWidth;

if(width<=600){

element.style.fontSize="14px";

}elseif(width>=601&&width<=1200){

element.style.fontSize="18px";

}else{

element.style.fontSize="24px";

}

}

window.addEventListener("resize",updateFontSize);

updateFontSize();

```

参考内容：

-[MDNWeb文档：@mediaCSSat规则](/zh-CN/docs/Web/CSS/@media)

-[MDNWeb文档：window.innerWidth属性](/zh-CN/docs/Web/API/Window/innerWidth)

-[MDNWeb文档：Window.addEventListener()方法](/zh-CN/docs/Web/API/EventTarg