49、Web开发中的CSS脚本与文档几何布局

Web开发中的CSS脚本与文档几何布局

1. CSS基础操作与JavaScript交互

在Web开发中，我们可以通过 transform 样式对元素进行移动、缩放和旋转操作，还能使用 transition 样式为其他CSS样式的变化添加动画效果。这些动画由浏览器自动处理，无需JavaScript介入，但我们可以用JavaScript来触发它们。

1.1 使用CSS类控制样式

使用JavaScript影响文档内容样式的最简单方法，是通过操作HTML标签的 class 属性来添加或移除CSS类名。这可以借助Element对象的 classList 属性轻松实现。

假设样式表中定义了一个“hidden”类：

.hidden {
    display: none;
}

我们可以使用以下代码隐藏和显示元素：

// 假设HTML文件中 "tooltip" 元素的 class 属性包含 "hidden"
// 使元素可见
document.querySelector("#tooltip").classList.remove("hidden");
// 再次隐藏元素
document.querySelector("#tooltip").classList.add("hidden");

1.2 内联样式的使用 </