web-dev-qa-db-ja.com

JavaScriptでHTML要素のスタイルプロパティを設定する

古い古典的なASPページがたくさんあり、その多くはテーブルにデータベースデータを表示しています。どのページにも並べ替え機能は組み込まれていません。元の開発者は使用するのに適していた。

私は、クライアント側のjavascriptを介したソートに取り組むための簡単な修正に取り組んでいます。ほとんどの場合、必要なことを行うスクリプトが既に作成されています。ただし、機能を少し追加する必要があります。これらのページの表の行は、行の色が交互に変わることが多く、これを実現するために使用されるメカニズムはページによって異なります。 CSSクラスを変更するのと同じくらい簡単かもしれませんし、スタイルがASPコードによってインラインでレンダリングされているかもしれません。

現在、テーブルをソートした後、各行は色付けスキームを保持しているため、交互の行は交互になりません。私はこのような簡単なものでそれを修正したいと思っていました：

/* "table" is a var for the table element I'm sorting.
   I've already verified it exists, and that there are at least three rows.
   At this point the first row (index 0) is always the header row.
 */

// check for alternating row styles:
var RowStyle = table.rows[1].style;
var AltStyle = table.rows[2].style;

// SORT HAPPENS HERE!!
//  snip  

// Apply alternating row styles
if (RowStyle === AltStyle) return true; 
for (var i=1,il=table.rows.length;i<il;i+=1)
{
    if (i%2==0) table.rows[i].style=RowStyle;
    else table.rows[i].style=AltStyle;                 
}

残念ながら、このような要素のスタイルプロパティに設定することはできません。オブジェクトにセッターがないと文句を言います。どうすれば簡単にこれを行うことができますか？ここではjQueryのようなフレームワークは許可されていません。それは私の手に負えません。

更新：
これが最良のソリューションですが、インラインスタイルではなく、すべてのクラスを使用するように100以上のページをリファクタリングすることは実用的ではありません。また、背景色だけでなく、もっと複雑なことがあります。たとえば、行は交互の行よりもはるかに暗いまたは明るい場合があり、1つのスタイルは異なる前景色を備えています。または、交互のスタイルでは境界線が異なる場合があります。これらのすべてのページで何が使用されているのか本当にわかりません。したがって、ある行から別の行にallスタイルを一般的に適用するものが必要です。

javascripthtmlstyles
32
Joel Coehoorn

cssTextとclassNameをつかんでみることができます。

var css1 = table.rows[1].style.cssText;
var css2 = table.rows[2].style.cssText;
var class1 = table.rows[1].className;
var class2 = table.rows[2].className;

// sort

// loop
    if (i%2==0) {
        table.rows[i].style.cssText = css1;
        table.rows[i].className = class1;
    } else {
        table.rows[i].style.cssText = css2;
        table.rows[i].className = class2;
    }

ただし、ブラウザのcssTextとの互換性については完全にはわかりません。

40
Jonathan Lonowski

任意の要素のスタイル属性を設定できます... IEで異なる方法で行う必要があります。（ bug 245 ）

//Standards base browsers
elem.setAttribute('style', styleString);

//Non Standards based IE browser
elem.style.setAttribute('cssText', styleString);

IE8の標準モードでは、最初の方法が機能することに注意してください。

23
scunliffe

私にとって、これは動作します：

function transferAllStyles(elemFrom, elemTo)
{
  var prop;
  for (prop in elemFrom.style)
    if (typeof prop == "string")
      try { elemTo.style[prop] = elemFrom.style[prop]; }
      catch (ex) { /* don't care */ }
}
4
Tomalak

通常、ノードのスタイルではなくノードのclassを変更し、CSSにその意味を処理させる方が望ましいことに注意してください。

2
annakata

DOM要素style "property"は、要素で定義されたすべてのスタイル属性の読み取り専用コレクションです。 （コレクションプロパティは読み取り専用であり、必ずしもコレクション内のアイテムではありません。）

要素でclassName "property"を使用する方が良いでしょう。

2
BlackMael

スタイルオブジェクト自体を設定するのではなく、要素のプロパティであるスタイルオブジェクトの背景色プロパティを設定します。

はい、そうではありませんが、jqueryと tablesorter のゼブラストライププラグインを使用すると、3行のコードでこれをすべて実行できます。

そして、クラス属性を設定するだけで、より体系化されたスタイルをハードコードされていない制御ができるため、より良いでしょう

0
Josh

行の色を変更するだけの場合は、style.backgroundColorプロパティにアクセスして設定するだけです。

ここ は、CSSプロパティからJS変換へのクイックリンクです。

0
Victor