0

これは 2 つの部分からなる質問です。まず、親要素の子 (またはサブ子など) であるすべての要素を取得する必要があり、次にそのスタイルをリセットする必要があります。そのため、私は次のようなことをしようとしています：

var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
    everything[i].css = "font: 100%/100% Verdana,Arial,Helvetica,sans-serif; color: rgb(0, 0, o); margin: 0px; padding: 0px; border-collapse: collapse; border-width: 0px; border-spacing: 0px; text-align: left; outline: 0pt none; text-transform: none; vertical-align: middle; background-color: transparent; table-layout: auto; min-width: 0px; min-height: 0px;"

だから私の質問は次のとおりです：

  • 特定の要素の下の DOM を効果的に通過する JavaScript 関数はありますか?
  • そのようなCSS文字列を設定できるJavaScript関数はありますか? または、次のようなエントリをたくさん用意する必要がありますか?
everything[i].style.font = ...;
everything[i].style.color = ...;
[...]
everything[i].style.min-height: ...;

jQuery はオプションではありません。

4

3 に答える 3

2

文字列の代わりに、より読みやすく保守しやすいオブジェクトを使用します。

var new_css = {
    font: '100%/100% Verdana,Arial,Helvetica,sans-serif',
    color: 'rgb(0, 0, o)',
    margin: '0px',
    padding: '0px',
    borderCollapse: 'collapse'
    /* rest here ... */
}

次に、次のようなヘルパー関数を使用します。

function setStyle (element, style) {
    for (var n in style) {
        element[n] = style[n];
    }
}

そしてあなたのforループに：

for (i=0; i<everything.length; i++) setStyle(everything[i],new_css);

関数に関するメモsetStyle(前回のように人々が私に反対票を投じる前に) の要素をチェックするために意図的に hasOwnProperty を使用しませんでしstyleた。この場合、ほとんどの場合、何からも継承されていないオブジェクトを使用しているためです。オブジェクトを他の方法で構築する場合new_css、または問題を引き起こす可能性のあるオブジェクトのプロトタイプを変更するライブラリ (プロトタイプ、私はあなたを見ています) を使用する場合は、hasOwnProperty チェックを自由に追加してください。とにかく、存在しないスタイル値を設定しても、ほとんど無害です。また、hasOwnProperty チェックがなくても、継承を使用してスタイル オブジェクトを構成できます。

于 2010-08-10T06:21:15.800 に答える
1

使用myElement.style.cssText:

var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
    everything[i].style.cssText = "font: 100%/100% Verdana,Arial,Helvetica,sans-serif; color: rgb(0, 0, o); margin: 0px; padding: 0px; border-collapse: collapse; border-width: 0px; border-spacing: 0px; text-align: left; outline: 0pt none; text-transform: none; vertical-align: middle; background-color: transparent; table-layout: auto; min-width: 0px; min-height: 0px;"

ただし、これにより、既に適用されているインライン スタイル属性が上書きされることに注意してください。追加のインライン css を追加するには、次を使用する必要があります。

myElement.style.cssText += '; color:red; ...'; // note the initial ";"
于 2010-08-10T10:01:07.210 に答える
0

親について話すとき、ある時点でその子を考慮すると想定されるため、少し風変わりです。しかし、あなたが言うと、every element below this oneそれらは該当する要素の後の DOM 要素である可能性があります。あなたの場合はどちらかです。

次の要素の兄弟のスタイルを変更したいと思います。生の JavaScript を使用すると、一般的なループ方法でトラバースできます。

nS = parent.nextElementSibling
while(nS){
  nS.style.width = '100%';
  // Change the desired style here
  // You can also further loop on nS's children using `nS.childNodes`,
  // if you want to change their styles too
  nS = nS.nextElementSibling;
}

未加工の JavaScript でわかるように、スタイルを変更する方法は非常に不快です。一方、jQuery は優れた DOM 機能を提供します。簡単なトラバースやスタイリングなども含まれます。

同様に、jQuery でも同じことが言えます。

$(parent).nextAll().each(function(){
      $(this).css({'width': '100%', 'other': 'rules', 'as': 'one-dict'});
      // Change the desired style here
      // You can also further loop nS's children using `$(this).children()`, 
      // if you want to change their styles too
});

お役に立てれば。

于 2010-08-10T06:33:53.300 に答える