jQuery css() 方法：设置、读取样式及 hover 交互

设置单个 CSS 属性

css() 方法最基础的用法是接受两个参数：样式属性名和样式值，两者之间以逗号分隔。这种方法适用于针对特定元素的某个样式进行微调。

例如，以下代码将 ID 为 #61dh 的元素下所有链接的颜色设置为 #123456：

$("#61dh a").css('color','#123456');

上述示例中，$("#61dh a") 表示选择器匹配的指定范围内的所有链接元素，而 .css('color','#123456') 则是具体的赋值操作。

批量设置多个 CSS 属性

当需要一次性改变元素的多个样式时，可以先定义一个包含多个属性的对象变量，然后将该对象作为唯一参数传递给 css() 方法。这种方式类似于在外部 CSS 文件中定义类，但在 DOM 层面直接生效。

具体代码如下：

var mycss = {
    background: '#EEE',
    width: '478px',
    margin: '10px 0 0',
    padding: '5px 10px',
    border: '1px solid #CCC'
};
$("#result").css(mycss);

注意：在上述代码中，变量名为 mycss，因此在调用时应确保传入正确的变量名而非错误的字符串或拼写。此操作将把定义的样式全部应用到 ID 为 #result 的 DIV 元素上。

读取元素的 CSS 属性值

css() 方法不仅用于修改样式，还可以用于查询。当只传递一个参数（即样式属性名）时，它将返回该元素对应的计算后的样式值。

例如，要查看 ID 为 #61dh 下的链接颜色：

$("#61dh a").css("color")

执行后，浏览器控制台或调试工具会显示该链接当前的实际颜色值。

结合 hover 事件实现交互样式

在许多前端场景中，我们需要在鼠标悬停时改变样式，离开时恢复原状。虽然可以使用 css() 结合 hover() 事件来实现，但以下是一个基于 jQuery 事件的标准写法：

$("#61dh a").hover(
    function(){
        $(this).css('color','#999');
    },
    function(){
        $(this).css('color','#123456');
    }
);

hover() 方法接收两个函数，第一个函数处理鼠标移入（mouseenter），第二个处理鼠标移出（mouseleave）。这里分别设置了悬停时的颜色和离开时的默认颜色。

最佳实践建议

虽然直接在 JS 中使用 css() 非常方便，但它会生成大量的内联样式（inline styles），这可能导致代码难以维护和样式覆盖优先级问题。在实际开发中，更推荐的做法是预先在 CSS 类中定义好不同状态（如 :hover）的样式，然后通过 JS 的 addClass() 和 removeClass() 方法来切换状态。这样代码结构更清晰，性能也更优。

以上就是 jQuery css() 方法在样式修改、读取及交互控制中的详细内容，更多关于 JavaScript 前端开发的资料请关注本站其它相关文章！