css选择器的开/关

on/off for css selectors

本文关键字：选择器 css      更新时间：2023-09-26

例如，我有以下CSS规则：

<style>
table {background:red;}
div {background:green;}
</style>

和以下HTML，调用JS函数：

<table onclick="turnItsCSS(on/off)"><tr><td>123</td></tr></table>

turnItsCSS()是否可以切换表的CSS规则？

我只想在document head中解析innerHTML，但这似乎还不够。

这是在css文件之间切换的好方法：

<button onclick="$('[rel=stylesheet]').attr('href','http://www.example.com/css/menu_red.css')">red</button>
<button onclick="$('[rel=stylesheet]').attr('href','http://www.example.com/css/menu_black.css')">black</button>

在jQuery中，您可以使用.addClass()或.removeClass()（或者更简单地说，.toggleClass()函数）

所以，假设你有一张桌子：

<a href="#" id="addClass">Add CSS</a>
<table id="the_table">
    <tr>
        <td>Hello, World</td>
    </tr>
</table>

您有以下CSS：

.table_red {
    color: red;
}

在你的jQuery中，你可以有：

$("#addClass").click(function() {
    $("#the_table").addClass(".table_red");
    // Check if the class is active, and remove it for a toggle.
    // or use the .toggleClass() function.
});

您可以使用jQuery或JavaScript动态更改对象样式在JavaScript中，您可以通过id或类名获取元素，并设置样式

var obj = getElementById("idName");
obj.style.width = "300px";

或

var obj = getElementsByClassName("classname")[0]; //return array with with all elements with same class
obj.style.width = "300px";

这里有一个使用HTML5的例子，不幸的是，我认为<IE10.

HTML

<table onclick="this.classList.toggle('on');"><tr><td>123</td></tr></table>

CSS

.on { 
    background-color:red;
}

http://jsfiddle.net/sGKgV/

退房https://stackoverflow.com/a/196038/1156119以获得其他技术的全面概述

相关文章：