css样式的动态添加及显示和隐藏等零碎用法

针对"css样式的动态添加及显示和隐藏等零碎用法"的问题，我来分享一些详细的攻略：

动态添加CSS样式

在网页中，我们可以通过JavaScript来动态添加CSS样式，这样可以让网页更加灵活美观，以下是使用JavaScript动态添加CSS样式的步骤：

1.创建一个新的style标签，将其插入到head标签中，代码如下：

var style = document.createElement('style');
document.head.appendChild(style);

2.通过style标签的sheet属性获取到样式表，代码如下：

var sheet = style.sheet;

3.使用insertRule或addRule方法来添加CSS规则，例如：

sheet.insertRule('body { background-color: #f0f0f0; }', 0);

这样就可以在head标签中动态添加CSS样式，页面背景颜色将变成灰色。

显示和隐藏元素

在开发中，我们经常需要通过JavaScript来控制元素的显示和隐藏，以下是两种控制元素显示和隐藏的方法：

1.使用style属性的display属性，通过设置display属性为none或block来控制元素的显示和隐藏，例如：

// 隐藏元素
element.style.display = 'none';

// 显示元素
element.style.display = 'block';

2.使用classList属性，将元素的class属性设置为一个包含display:none的类或不包含该类来控制元素的显示和隐藏，例如：

// 隐藏元素
element.classList.add('hide');

// 显示元素
element.classList.remove('hide');

以上是CSS样式的动态添加及显示和隐藏等零碎用法的攻略。具体应用还需根据实际情况来决定。