JavaScriptを使用してCSSスタイルシートを変更することは可能ですか？
私は話していません：
document.getElementById('id').style._____='.....';
私は変更について話している：
#id {
param: value;
}
頭の中に新しいオブジェクトを作成したり、そこにスタイルタグをinnerHTMLしたりするなど、汚いこと（まだ試していません）を行う以外に、これは機能したとしても、スタイルとしていくつかの問題を引き起こします。ブロックはすでに他の場所で定義されており、ブラウザが動的に作成されたスタイルブロックをいつ/いつ解析するかはわかりませんか？
はい、できますが、ブラウザ間の互換性の問題に直面します。
http://www.quirksmode.org/dom/changess.html
ブラウザのサポートが大幅に改善されました（IE9 +を含むすべてのブラウザがサポートされています）。
このinsertRule()メソッドを使用すると、スタイルシートにルールを動的に追加できます。
を使用deleteRule()すると、スタイルシートから既存のルールを削除できます。
cssRulesスタイルシート内のルールには、スタイルシートの属性を介してアクセスできます。
.insertRuleとの組み合わせを使用して.cssRules、IE9までさかのぼってこれを実行できます。
function changeStylesheetRule(stylesheet, selector, property, value) {
// Make the strings lowercase
selector = selector.toLowerCase();
property = property.toLowerCase();
value = value.toLowerCase();
// Change it if it exists
for(var i = 0; i < stylesheet.cssRules.length; i++) {
var rule = stylesheet.cssRules[i];
if(rule.selectorText === selector) {
rule.style[property] = value;
return;
}
}
// Add it if it does not
stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}
// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");
プログラムで一連のスタイルをオブジェクトに追加したい場合、プログラムでクラスをオブジェクトに追加する方が簡単です（このようなクラスには、CSSでスタイルが関連付けられています）。CSSで優先順位を制御できるため、新しいクラスの新しいスタイルで以前のスタイルを上書きできます。これは通常、スタイルシートを直接変更するよりもはるかに簡単で、完全にクロスブラウザで機能します。
スタイルルールのプロパティを変更する
function change_css_style (titulo,selector,propiedad,valor) {
let i=0;
while (i<document.styleSheets.length) {
if (document.styleSheets[i].title==titulo) {
let y=0;
while (y<document.styleSheets[i].cssRules.length) {
if (document.styleSheets[i].cssRules[y].selectorText==selector) {
document.styleSheets[i].cssRules[y].style[propiedad] = valor;
y = document.styleSheets[i].cssRules.length;
}
y++;
}
i=document.styleSheets.length;
}
i++;
}
}
デモ
<style title="chat_inicio">
.contenido .mensajes {
width: 100px;
height: 300px;
}
</style>
タイトルがchat_inicioのスタイルブックをセレクター.contenido.mensajesでスタイル幅のプロパティを475pxに変更します
<script>
cambiar_css_style ('chat_inicio','.contenido .mensajes','width','475px');
</script>
この方法のいくつかの利点：
!important属性を受け入れる使用法：
adjustCSSRules('#myDiv', 'width: 300px !important');
方法：
function adjustCSSRules(selector, props, sheets){
// get stylesheet(s)
if (!sheets) sheets = [...document.styleSheets];
else if (sheets.sup){ // sheets is a string
let absoluteURL = new URL(sheets, document.baseURI).href;
sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
}
else sheets = [sheets]; // sheets is a stylesheet
// CSS (& HTML) reduce spaces in selector to one.
selector = selector.replace(/\s+/g, ' ');
const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
let rule = sheets.map(findRule).filter(i=>i).pop()
const propsArr = props.sup
? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
: Object.entries(props); // from Object
if (rule) for (let [prop, val] of propsArr){
// rule.style[prop] = val; is against the spec, and does not support !important.
rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
}
else {
sheet = sheets.pop();
if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
}
}
このメソッドは3つの引数を取ります。
.myClass #myDivます（一致し.myClass #myDivます）{ border: "solid 3px green", color: "white" }'border: solid 3px green; color: white'document.styleSheets[1]-シートへの参照その他の例：
adjustCSSRules('#myDiv', {width: '30px'}); // all stylesheets
adjustCSSRules('#myDiv', 'width: 30px', 'style.css'); // style.css only
adjustCSSRules('#myDiv .myClass', 'width: 30px', document.styleSheets[0]); // only first stylesheet