これから 00bf00 部分をどのように削除しますか:
#main { background:#00bf00 00bf00 url('images/low.png') repeat; }
私は動的にこれを行う必要があるので、おそらくjavascript(またはアイデアがあれば何か他のもの)
コードスニペットを追加してコードを削除する方法があるかどうかを確認するためだけに、コードを適切に出力するように変更したくありません
これから 00bf00 部分をどのように削除しますか:
#main { background:#00bf00 00bf00 url('images/low.png') repeat; }
私は動的にこれを行う必要があるので、おそらくjavascript(またはアイデアがあれば何か他のもの)
コードスニペットを追加してコードを削除する方法があるかどうかを確認するためだけに、コードを適切に出力するように変更したくありません
// for imported stylesheets
var cssRules = [];
for (var i = 0, il = document.styleSheets.length; i < il; i++) {
if (document.styleSheets[0].cssRules)
cssRules = document.styleSheets[0].cssRules;
else if (document.styleSheets[0].rules)
cssRules = document.styleSheets[0].rules;
for (var j = 0, jl = cssRules.length; j < jl; j++) {
if (/^#main/.test(cssRules[j].cssText))
cssRules[j].cssText = cssRules[j].cssText.replace(/[^#]00bf00/, '');
}
}
// for style tags
var styleTags = document.getElementsByTagName('style');
for (var i = 0, il = styleTags.length; i < il; i++) {
styleTags[i].innerHTML = styleTags[i].innerHTML
.replace(/(#main.*)[^#]00bf00/, '$1');
}
すでに存在する要素のスタイルを変更したいだけなら、
document.body.style.background = '#00bf00 url(\'images/low.png\') repeat';
スタイル自体を変更して将来の要素にも適用する必要がある場合は、セレクターを正しい値で上書きします。
$('head').append('<style>#main { background:#00bf00 url(\'images/low.png\') repeat; } </style>')
(この例では、既存のスタイルが head にあると想定しているため、既存のスタイルの後に新しいスタイルが挿入されます)
head
タグ内で css プロパティを直接変更することはできません。これを試してください。
$('#main').css('background-color', "transparent");
また:
document.getElementById('main').style.backgroundColor = 'transparent';
Quentin が言ったように、ブラウザは既にこのルールを削除している可能性があるため、実際に編集することはできません。
一方、クライアント側の css 解析を見ることができます。LESS にはクライアント側バージョンの CSS プロセッサがあり、基本的に利用可能な CSS ソースを見て、それを変更してからブラウザに返します。LESS のソース コードはオープン ソースであるため、これがどのように行われるかを確認できます。残念ながら、これはかなり複雑なプロセスであり、このようなものにはやり過ぎです。CSS がブラウザーに配信される前に、CSS を修正する方がはるかに良いでしょう。