[英]How can I change the css class rules using jQuery?
任何人都可以幫助我,我的問題有兩個部分。
我想要做的是使用 jQuery 即時更改 css class 規則。
.classname{顏色:紅色; 字體大小:14px;}
在上面的示例中,我有一個名為.classname
的 class 現在使用 jQuery 我只想更改字體大小而不是使用.classname
中的顏色,而不是通過添加 css 內聯。
我想創建.classname
更改並將其保存到文件中,記住將有完整的樣式表或沒有將保存在文件中的類名。
我怎樣才能以最簡單和更好的方式做到這一點?
謝謝!
據我所知,沒有 jQuery 方法可以做到這一點。 可能有一些 jQuery 插件,但我不知道。
基本上,您在第一個問題中嘗試實現的目標可以使用document
object 的styleSheets
屬性來實現。 它比這要復雜一些,因為您需要走到一個相當深的 object 鏈,但仍然適用於包括 Internet Explorer 6 在內的所有主要瀏覽器。下面是一個概念證明。 CSS 位於 STYLE 標簽內,但也可與外部 CSS 一起使用。 我會讓你做抽象。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
color: red;
font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("button").onclick = function() {
var ss = document.styleSheets;
for (var i=0; i<ss.length; i++) {
var rules = ss[i].cssRules || ss[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText === ".classname") {
rules[j].style.color = "green";
}
}
}
};
}
</script>
</head>
<body>
<h1 class="classname">Some red text</h1>
<button id="button">Make text green</button>
</body>
</html>
對於您的第二個問題,我沒有時間編寫解決方案,但這將涉及閱讀 CSS 聲明,並使用 CssRule object 的cssText
屬性來構建一個字符串,該字符串最終將發送到服務器使用Ajax POST 請求。 服務器端是您的業務。
參考:
希望能幫助到你
最近我需要為自動完成小部件修復一些 jquery 主題問題。 我想更改自動完成小部件的背景顏色。
於是我查了一下 CSS 發現自動補全 class 是這樣定義的
.ui-autocomplete { position: absolute; cursor: default; }
因此,在我的程序中,我發出以下語句,通過添加背景屬性來更改 class。 請注意,我保留其他屬性,否則會破壞現有功能
$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");
只有在以下情況下,您才應該采用這種方法:
有一個 jQuery 插件可以做到這一點: http://plugins.jquery.com/project/jquerycssrule
對於我從事的一個小項目,我提取了基本要素並創建了以下 function:
function addCSSRule(sel, prop, val) {
for(var i = 0; i < document.styleSheets.length; i++){
var ss = document.styleSheets[i];
var rules = (ss.cssRules || ss.rules);
var lsel = sel.toLowerCase();
for(var i2 = 0, len = rules.length; i2 < len; i2++){
if(rules[i2].selectorText && (rules[i2].selectorText.toLowerCase() == lsel)){
if(val != null){
rules[i2].style[prop] = val;
return;
}
else{
if(ss.deleteRule){
ss.deleteRule(i2);
}
else if(ss.removeRule){
ss.removeRule(i2);
}
else{
rules[i2].style.cssText = '';
}
}
}
}
}
var ss = document.styleSheets[0] || {};
if(ss.insertRule) {
var rules = (ss.cssRules || ss.rules);
ss.insertRule(sel + '{ ' + prop + ':' + val + '; }', rules.length);
}
else if(ss.addRule){
ss.addRule(sel, prop + ':' + val + ';', 0);
}
}
如果我正確理解您的問題,您想通讀 CSS 文件,對 class 進行更改,然后通過保存文件來保留這些更改?
你不能用從客戶端運行的 JavaScript/jQuery 來做到這一點; 您當然可以更改與 CSS class .classname
匹配的 DOM 中每個單獨元素的字體大小,就像這樣
$('.classname').css('font-size','14px');
但是客戶端 JavaScript 無法從 web 瀏覽器訪問文件系統,因此您需要一些其他方式(即服務器端代碼)來更改 CSS 文件本身。
您也可以嘗試 JSS,它對我來說非常有用:https://github.com/Box9/jss
下載 jss.js 並將其包含在您的 HTML 中:
<script type="text/javascript" src="jss.js"></script>
添加新規則(或擴展現有規則):
jss('.special', { color: 'red', fontSize: '2em', padding: '10px' });
檢索現有規則:
jss('.special').get();
回報:
{ 'color': 'red', 'font-size': '2em', 'padding-bottom': '10px', 'padding-left': '10px', 'padding-right': '10px', 'padding-top': '10px' }
刪除現有規則:
jss('.special').remove();
DOM Level 2 允許直接操作樣式表的 css 規則。 前任:
var ss = document.styleSheets[1]; // ref to the first stylesheet
ss.cssRules[0].style.backgroundColor="blue"; // modification of the 1rst rule
有2個接口:
這使得激活/停用樣式表、刪除規則、添加規則等成為可能... MDM 中的所有詳細信息: Using_dynamic_styling_information
What you are looking to do is done by having a couple of themes on the server (theme1.css, theme2.css, theme3.css, etc.) and letting the user select the theme he likes. 然后,您可以使用用戶配置文件將用戶選擇的主題 (theme2.css) 保存在數據庫中。 當用戶然后顯示他的頁面時,您在頁面頂部包含 theme2.css 而不是主題 default.css。
這適用於服務器端技術,例如 PHP 或 ASP.NET 或任何您喜歡的。 當然,您可能會使用 javascript 在用戶計算機上保存一個cookie以記住他的選擇,然后再次使用 javascript 來 包含您通過 cookie 記住的文件。
如果您想讓用戶准確管理適用於設計特定元素的內容(例如 header 的顏色、字體等),您可以再次使用服務器端技術(我認為在這種情況下更好) 或 javascript 保存諸如 header=blue、font=Arial 之類的內容並使用jQuery應用存儲到您頁面的內容。
希望它能給你一個概述。
對於第一部分,我通常指定一個樣式塊並使用 jQuery 打開/關閉它。 例如:
<style type="text/css" id="my-style" media="all">
.classname{color:red; font-size:14px;}
</style>
然后可以通過設置 disabled 屬性來進行切換,如:
$('#my-style').prop('disabled', true);
$('#my-style').prop('disabled', false);
由於 styles 彼此應用到頭部“重載”,因此將使用所有相關元素的后期append()
以及 styles,除非之前有!important
涉及。
用於分配 css 內容的 function 應該是text()
而不是html()
以防止意外注入代碼
var dynamic_css = function(class_name){
return '.' + class_name + ' {color:red; font-size:14px;}';
}
var styles = $('<style type="text/css">');
styles.text(dynamic_css('my_classname'));
$('html head').append(styles);
之后:
styles.remove();
將 class 分配給 styles 元素以在以后識別它也很有效
在半相關的說明中,另請參閱我關於更改 LESS 變量的答案,這將導致更新的 CSS 規則。 根據您的情況,這可能更有用,因為單個 LESS 變量可以驅動許多 CSS 規則.... https://stackoverflow.com/a/9491074/255961
不確定是否要更改 class 屬性我來這里尋找自己的答案,似乎已經有一些答案,至於保存,您可以使用 jquery $.post 方法發送包含更改或 $.get 的表單url 編碼值,然后使用 PHP fwrite 或 file_put_contents 寫入新的 css 文件。 在存儲任何數據之前,請確保您限制對此功能的訪問或確保值符合特定標准。
I used the addClass of jquery: http://api.jquery.com/addClass/ and then set the class as the attributes i want to change.
我很確定您不能更改現有樣式中的規則。 即使螢火蟲也不會讓你這樣做。 您可以設置一個元素或一組元素的樣式,可以分配和取消分配類,但我認為您不能更改現有的類。 為了執行您所要求的操作,您需要維護某種關聯數組來記錄對現有類的建議更改,然后保存這些更改,您需要上傳到服務器,然后服務器可以提供下載到客戶端的鏈接.
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.