ฉันต้องการสร้าง CSS สไตล์ชีทคลาสแบบไดนามิกใน JavaScript และกำหนดให้กับองค์ประกอบ HTML บางอย่างเช่น - div, table, span, tr, ฯลฯ และการควบคุมบางอย่างเช่น asp: Textbox, Dropdownlist และ datalist
เป็นไปได้ไหม?
มันจะดีกับตัวอย่าง
คำตอบ:
แม้ว่าฉันไม่แน่ใจว่าทำไมคุณต้องการสร้างคลาส CSS ด้วย JavaScript นี่คือตัวเลือก:
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);
document.getElementById('someElementId').className = 'cssClass';พบทางออกที่ดีกว่าซึ่งใช้ได้กับทุกเบราว์เซอร์
ใช้ document.styleSheet เพื่อเพิ่มหรือแทนที่กฎ คำตอบที่ยอมรับนั้นสั้นและมีประโยชน์ แต่ใช้ได้กับ IE8 และน้อยกว่าด้วย
function createCSSSelector (selector, style) {
if (!document.styleSheets) return;
if (document.getElementsByTagName('head').length == 0) return;
var styleSheet,mediaType;
if (document.styleSheets.length > 0) {
for (var i = 0, l = document.styleSheets.length; i < l; i++) {
if (document.styleSheets[i].disabled)
continue;
var media = document.styleSheets[i].media;
mediaType = typeof media;
if (mediaType === 'string') {
if (media === '' || (media.indexOf('screen') !== -1)) {
styleSheet = document.styleSheets[i];
}
}
else if (mediaType=='object') {
if (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1)) {
styleSheet = document.styleSheets[i];
}
}
if (typeof styleSheet !== 'undefined')
break;
}
}
if (typeof styleSheet === 'undefined') {
var styleSheetElement = document.createElement('style');
styleSheetElement.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(styleSheetElement);
for (i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].disabled) {
continue;
}
styleSheet = document.styleSheets[i];
}
mediaType = typeof styleSheet.media;
}
if (mediaType === 'string') {
for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
if(styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase()==selector.toLowerCase()) {
styleSheet.rules[i].style.cssText = style;
return;
}
}
styleSheet.addRule(selector,style);
}
else if (mediaType === 'object') {
var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
for (var i = 0; i < styleSheetLength; i++) {
if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) {
styleSheet.cssRules[i].style.cssText = style;
return;
}
}
styleSheet.insertRule(selector + '{' + style + '}', styleSheetLength);
}
}ฟังก์ชั่นการใช้งานมีดังนี้
createCSSSelector('.mycssclass', 'display:none');var styleSheetLength = styleSheet.cssRules ? styleSheet.cssRules.length : 0และแทนที่การใช้งานมากกว่าการใช้งานฟังก์ชั่น
คำตอบสั้น ๆ นี้เข้ากันได้กับ "ในทุกเบราว์เซอร์" (เฉพาะ IE8 / 7):
function createClass(name,rules){
var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
if(!(style.sheet||{}).insertRule)
(style.styleSheet || style.sheet).addRule(name, rules);
else
style.sheet.insertRule(name+"{"+rules+"}",0);
}
createClass('.whatever',"background-color: green;");และบิตสุดท้ายนี้ใช้คลาสกับองค์ประกอบ:
function applyClass(name,element,doRemove){
if(typeof element.valueOf() == "string"){
element = document.getElementById(element);
}
if(!element) return;
if(doRemove){
element.className = element.className.replace(new RegExp("\\b" + name + "\\b","g"));
}else{
element.className = element.className + " " + name;
}
}นี่คือหน้าทดสอบเล็กน้อยเช่นกัน: https://gist.github.com/shadybones/9816763
กุญแจสำคัญเล็กน้อยคือความจริงที่ว่าองค์ประกอบสไตล์มีคุณสมบัติ "styleSheet" / "ชีต" ซึ่งคุณสามารถใช้เพื่อเพิ่ม / ลบกฎ
มีปลั๊กอิน jQuery แบบเบาซึ่งอนุญาตให้สร้างการประกาศ CSS: jQuery-injectCSS
ในความเป็นจริงมันใช้JSS (CSS อธิบายโดย JSON) แต่มันค่อนข้างง่ายต่อการจัดการเพื่อสร้างสไตล์ CSS แบบไดนามิก
$.injectCSS({
"#test": {
height: 123
}
});YUI มียูทิลิตี้สไตล์ชีทที่ดีที่สุดเท่าที่ฉันเคยเห็นมา ฉันแนะนำให้คุณลองดู แต่นี่เป็นรสชาติ:
// style element or locally sourced link element
var sheet = YAHOO.util.StyleSheet(YAHOO.util.Selector.query('style',null,true));
sheet = YAHOO.util.StyleSheet(YAHOO.util.Dom.get('local'));
// OR the id of a style element or locally sourced link element
sheet = YAHOO.util.StyleSheet('local');
// OR string of css text
var css = ".moduleX .alert { background: #fcc; font-weight: bold; } " +
".moduleX .warn { background: #eec; } " +
".hide_messages .moduleX .alert, " +
".hide_messages .moduleX .warn { display: none; }";
sheet = new YAHOO.util.StyleSheet(css);เห็นได้ชัดว่ามีวิธีที่ง่ายกว่ามากในการเปลี่ยนรูปแบบในทันทีเช่นที่แนะนำไว้ที่นี่ หากพวกเขาเข้าใจถึงปัญหาของคุณพวกเขาอาจจะดีที่สุด แต่มีเหตุผลที่แน่นอนว่าทำไมการแก้ไข css นั้นเป็นทางออกที่ดีกว่า กรณีที่ชัดเจนที่สุดคือเมื่อคุณต้องการแก้ไของค์ประกอบจำนวนมาก กรณีที่สำคัญอื่น ๆ คือถ้าคุณต้องการการเปลี่ยนแปลงสไตล์ของคุณเพื่อเกี่ยวข้องกับน้ำตก การใช้ Dom เพื่อแก้ไของค์ประกอบจะมีลำดับความสำคัญสูงกว่าเสมอ มันเป็นวิธีการค้อนขนาดใหญ่และเทียบเท่ากับการใช้แอตทริบิวต์สไตล์โดยตรงกับองค์ประกอบ HTML นั่นไม่ใช่ผลที่ต้องการเสมอไป
ตั้งแต่ IE 9. คุณสามารถโหลดไฟล์ข้อความและตั้งค่าคุณสมบัติ style.innerHTML ดังนั้นโดยพื้นฐานแล้วคุณสามารถโหลดไฟล์ css ผ่าน ajax (และรับการเรียกกลับ) จากนั้นก็ตั้งค่าข้อความภายในแท็กสไตล์เช่นนี้
วิธีนี้ใช้ได้กับเบราว์เซอร์อื่นไม่แน่ใจว่าไกลแค่ไหน แต่ตราบใดที่คุณไม่จำเป็นต้องรองรับ IE8 มันก็ใช้ได้
// RESULT: doesn't work in IE8 and below. Works in IE9 and other browsers.
$(document).ready(function() {
// we want to load the css as a text file and append it with a style.
$.ajax({
url:'myCss.css',
success: function(result) {
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = result;
document.getElementsByTagName("head")[0].appendChild(s);
},
fail: function() {
alert('fail');
}
})
});และจากนั้นคุณสามารถดึงไฟล์ภายนอกเช่น myCss.css
.myClass { background:#F00; }นี่คือวิธีการแก้ปัญหาของ Vishwanath เขียนใหม่ด้วยความคิดเห็นเล็กน้อย:
function setStyle(cssRules, aSelector, aStyle){
for(var i = 0; i < cssRules.length; i++) {
if(cssRules[i].selectorText && cssRules[i].selectorText.toLowerCase() == aSelector.toLowerCase()) {
cssRules[i].style.cssText = aStyle;
return true;
}
}
return false;
}
function createCSSSelector(selector, style) {
var doc = document;
var allSS = doc.styleSheets;
if(!allSS) return;
var headElts = doc.getElementsByTagName("head");
if(!headElts.length) return;
var styleSheet, media, iSS = allSS.length; // scope is global in a function
/* 1. search for media == "screen" */
while(iSS){ --iSS;
if(allSS[iSS].disabled) continue; /* dont take into account the disabled stylesheets */
media = allSS[iSS].media;
if(typeof media == "object")
media = media.mediaText;
if(media == "" || media=='all' || media.indexOf("screen") != -1){
styleSheet = allSS[iSS];
iSS = -1; // indication that media=="screen" was found (if not, then iSS==0)
break;
}
}
/* 2. if not found, create one */
if(iSS != -1) {
var styleSheetElement = doc.createElement("style");
styleSheetElement.type = "text/css";
headElts[0].appendChild(styleSheetElement);
styleSheet = doc.styleSheets[allSS.length]; /* take the new stylesheet to add the selector and the style */
}
/* 3. add the selector and style */
switch (typeof styleSheet.media) {
case "string":
if(!setStyle(styleSheet.rules, selector, style));
styleSheet.addRule(selector, style);
break;
case "object":
if(!setStyle(styleSheet.cssRules, selector, style));
styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length);
break;
}โครงการที่น่าสนใจซึ่งจะช่วยให้คุณออกในงานของคุณคือJSS
JSS เป็นนามธรรมที่ดีกว่า CSS มันใช้ JavaScript เป็นภาษาเพื่ออธิบายสไตล์ในทางที่เปิดเผยและบำรุงรักษา มันเป็นคอมไพเลอร์ JS กับ CSS ที่มีประสิทธิภาพสูงซึ่งใช้งานได้จริงในเบราว์เซอร์และฝั่งเซิร์ฟเวอร์
ไลบรารี JSS ช่วยให้คุณสามารถฉีดในส่วน DOM / head โดยใช้.attach()ฟังก์ชัน
Repl รุ่นออนไลน์สำหรับการประเมินผล
เพิ่มเติมข้อมูลเกี่ยวกับ JSS
ตัวอย่าง:
// Use plugins.
jss.use(camelCase())
// Create your style.
const style = {
myButton: {
color: 'green'
}
}
// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)
// If you want to render on the client, insert it into DOM.
sheet.attach()คุณสามารถใช้โมดูล ccsom:
goog.require('goog.cssom');
var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');รหัสจาวาสคริปต์พยายามที่จะข้ามเบราว์เซอร์เมื่อวางโหนด css ลงในส่วนหัวของเอกสาร
https://jsfiddle.net/xk6Ut/256/
ตัวเลือกหนึ่งสำหรับสร้างและอัปเดตคลาส CSS ใน JavaScript แบบไดนามิก:
.....
function writeStyles(styleName, cssText) {
var styleElement = document.getElementById(styleName);
if (styleElement)
document.getElementsByTagName('head')[0].removeChild(
styleElement);
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = styleName;
styleElement.innerHTML = cssText;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}...
var cssText = '.testDIV{ height:' + height + 'px !important; }';
writeStyles('styles_js', cssText)ดูคำตอบและสิ่งที่ชัดเจนที่สุดและตรงไปตรงมาหายไป: ใช้document.write()เพื่อเขียน CSS ที่คุณต้องการ
นี่คือตัวอย่าง (ดูได้จาก codepen: http://codepen.io/ssh33/pen/zGjWga ):
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
.d, body{ font: 3vw 'Open Sans'; padding-top: 1em; }
.d {
text-align: center; background: #aaf;
margin: auto; color: #fff; overflow: hidden;
width: 12em; height: 5em;
}
</style>
<script>
function w(s){document.write(s)}
w("<style>.long-shadow { text-shadow: ");
for(var i=0; i<449; i++) {
if(i!= 0) w(","); w(i+"px "+i+"px #444");
}
w(";}</style>");
</script>
<div class="d">
<div class="long-shadow">Long Shadow<br> Short Code</div>
</div>function createCSSClass(selector, style, hoverstyle)
{
if (!document.styleSheets)
{
return;
}
if (document.getElementsByTagName("head").length == 0)
{
return;
}
var stylesheet;
var mediaType;
if (document.styleSheets.length > 0)
{
for (i = 0; i < document.styleSheets.length; i++)
{
if (document.styleSheets[i].disabled)
{
continue;
}
var media = document.styleSheets[i].media;
mediaType = typeof media;
if (mediaType == "string")
{
if (media == "" || (media.indexOf("screen") != -1))
{
styleSheet = document.styleSheets[i];
}
}
else if (mediaType == "object")
{
if (media.mediaText == "" || (media.mediaText.indexOf("screen") != -1))
{
styleSheet = document.styleSheets[i];
}
}
if (typeof styleSheet != "undefined")
{
break;
}
}
}
if (typeof styleSheet == "undefined") {
var styleSheetElement = document.createElement("style");
styleSheetElement.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
for (i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].disabled) {
continue;
}
styleSheet = document.styleSheets[i];
}
var media = styleSheet.media;
mediaType = typeof media;
}
if (mediaType == "string") {
for (i = 0; i < styleSheet.rules.length; i++)
{
if (styleSheet.rules[i].selectorText.toLowerCase() == selector.toLowerCase())
{
styleSheet.rules[i].style.cssText = style;
return;
}
}
styleSheet.addRule(selector, style);
}
else if (mediaType == "object")
{
for (i = 0; i < styleSheet.cssRules.length; i++)
{
if (styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase())
{
styleSheet.cssRules[i].style.cssText = style;
return;
}
}
if (hoverstyle != null)
{
styleSheet.insertRule(selector + "{" + style + "}", 0);
styleSheet.insertRule(selector + ":hover{" + hoverstyle + "}", 1);
}
else
{
styleSheet.insertRule(selector + "{" + style + "}", 0);
}
}
}
createCSSClass(".modalPopup .header",
" background-color: " + lightest + ";" +
"height: 10%;" +
"color: White;" +
"line-height: 30px;" +
"text-align: center;" +
" width: 100%;" +
"font-weight: bold; ", null);นี่คือโซลูชันแบบแยกส่วนของฉัน:
var final_style = document.createElement('style');
final_style.type = 'text/css';
function addNewStyle(selector, style){
final_style.innerHTML += selector + '{ ' + style + ' } \n';
};
function submitNewStyle(){
document.getElementsByTagName('head')[0].appendChild(final_style);
final_style = document.createElement('style');
final_style.type = 'text/css';
};
function submitNewStyleWithMedia(mediaSelector){
final_style.innerHTML = '@media(' + mediaSelector + '){\n' + final_style.innerHTML + '\n};';
submitNewStyle();
};คุณโดยทั่วไปทุกที่ในรหัสของคุณทำ:
addNewStyle('body', 'color: ' + color1);ซึ่งcolor1เป็นตัวแปรที่กำหนดไว้
เมื่อคุณต้องการที่จะ "โพสต์" ไฟล์ CSS ปัจจุบันที่คุณก็ทำsubmitNewStyle(),
และจากนั้นคุณยังสามารถเพิ่ม CSS เพิ่มเติมในภายหลัง
หากคุณต้องการที่จะเพิ่มมันด้วย "แบบสอบถามสื่อ" คุณมีตัวเลือก
หลังจากที่ "addingNewStyles" submitNewStyleWithMedia('min-width: 1280px');คุณเพียงแค่ใช้
มันค่อนข้างมีประโยชน์สำหรับกรณีการใช้งานของฉันเพราะฉันเปลี่ยน CSS ของเว็บไซต์สาธารณะ (ไม่ใช่ของฉัน) ตามเวลาปัจจุบัน ผมส่งไฟล์ CSS หนึ่งก่อนที่จะใช้สคริปต์ "งาน" และส่วนที่เหลือหลังจากนั้น (ที่ทำให้รูปลักษณ์ของเว็บไซต์ครับเหมือนมันก่อนที่ควรเข้าถึงองค์ประกอบผ่านquerySelector)
เพื่อประโยชน์ของผู้ค้นหา; หากคุณใช้ jQuery คุณสามารถทำสิ่งต่อไปนี้:
var currentOverride = $('#customoverridestyles');
if (currentOverride) {
currentOverride.remove();
}
$('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");เห็นได้ชัดว่าคุณสามารถเปลี่ยน CSS ภายในเป็นอะไรก็ได้ที่คุณต้องการ
เห็นคุณค่าของบางคนชอบ JavaScript ที่บริสุทธิ์ แต่มันใช้งานได้และค่อนข้างแข็งแกร่งสำหรับการเขียน / เขียนทับสไตล์แบบไดนามิก
ฉันกำลังค้นหาคำตอบบางส่วนที่นี่และฉันไม่สามารถหาสิ่งใดที่เพิ่มสไตล์ชีทใหม่โดยอัตโนมัติหากไม่มีและหากไม่เพียงแค่ปรับเปลี่ยนสไตล์ที่มีอยู่ที่มีสไตล์ที่ต้องการอยู่แล้วดังนั้นฉันจึงสร้างฟังก์ชันใหม่ ( ควรทำงานกับเบราว์เซอร์ทั้งหมดแม้ว่าจะไม่ได้ทดสอบให้ใช้ addRule และนอกเหนือจาก JavaScript พื้นฐานเท่านั้นแล้วให้ฉันรู้ว่ามันใช้งานได้):
function myCSS(data) {
var head = document.head || document.getElementsByTagName("head")[0];
if(head) {
if(data && data.constructor == Object) {
for(var k in data) {
var selector = k;
var rules = data[k];
var allSheets = document.styleSheets;
var cur = null;
var indexOfPossibleRule = null,
indexOfSheet = null;
for(var i = 0; i < allSheets.length; i++) {
indexOfPossibleRule = findIndexOfObjPropInArray("selectorText",selector,allSheets[i].cssRules);
if(indexOfPossibleRule != null) {
indexOfSheet = i;
break;
}
}
var ruleToEdit = null;
if(indexOfSheet != null) {
ruleToEdit = allSheets[indexOfSheet].cssRules[indexOfPossibleRule];
} else {
cur = document.createElement("style");
cur.type = "text/css";
head.appendChild(cur);
cur.sheet.addRule(selector,"");
ruleToEdit = cur.sheet.cssRules[0];
console.log("NOPE, but here's a new one:", cur);
}
applyCustomCSSruleListToExistingCSSruleList(rules, ruleToEdit, (err) => {
if(err) {
console.log(err);
} else {
console.log("successfully added ", rules, " to ", ruleToEdit);
}
});
}
} else {
console.log("provide one paramter as an object containing the cssStyles, like: {\"#myID\":{position:\"absolute\"}, \".myClass\":{background:\"red\"}}, etc...");
}
} else {
console.log("run this after the page loads");
}
}; จากนั้นเพียงเพิ่มฟังก์ชันผู้ช่วยทั้งสองนี้ทั้งภายในฟังก์ชันด้านบนหรือที่อื่น:
function applyCustomCSSruleListToExistingCSSruleList(customRuleList, existingRuleList, cb) {
var err = null;
console.log("trying to apply ", customRuleList, " to ", existingRuleList);
if(customRuleList && customRuleList.constructor == Object && existingRuleList && existingRuleList.constructor == CSSStyleRule) {
for(var k in customRuleList) {
existingRuleList["style"][k] = customRuleList[k];
}
} else {
err = ("provide first argument as an object containing the selectors for the keys, and the second argument is the CSSRuleList to modify");
}
if(cb) {
cb(err);
}
}
function findIndexOfObjPropInArray(objPropKey, objPropValue, arr) {
var index = null;
for(var i = 0; i < arr.length; i++) {
if(arr[i][objPropKey] == objPropValue) {
index = i;
break;
}
}
return index;
}(โปรดสังเกตว่าในทั้งคู่ฉันใช้ for for loop แทนที่จะเป็น. ฟิลเตอร์เนื่องจากคลาสรายการสไตล์ CSS / กฎมีเพียงคุณสมบัติแบบยาวและไม่มีวิธี. filter)
จากนั้นเรียกมันว่า:
myCSS({
"#coby": {
position:"absolute",
color:"blue"
},
".myError": {
padding:"4px",
background:"salmon"
}
})แจ้งให้เราทราบหากใช้งานได้กับเบราว์เซอร์ของคุณหรือให้ข้อผิดพลาด