2

HTMLで

<td colspan=3 style='background-color:pink;' >hello world</td>

しかしJavascript / DOMでは

var td = document.createElement('td');
td.colSpan = 3;
td.style.backgroundColor = 'pink';

HTML プロパティとスタイルの Javascript/DOM 属性とスタイルへのマッピングはありますか?

CSS スタイルの camelBack について理解する

などの HTML 仕様があり、colspan=3それらを Javascript で実装しています。そのため、HTML プロパティ名と DOM プロパティ名の間のマッピングが必要です。

わかりました、これは異常なプロパティのマッピングです。1::1 マッピングと関数を持つものは省略されます。

html2dom = {
  acceptcharset: 'acceptCharset',
  アクセスキー: 'アクセスキー',
  bgcolor: 'bgColor',
  セルインデックス: 'セルインデックス',
  cellpadding: 'cellPadding',
  セル間隔: 'cellSpacing',
  choff: 'chOff',
  クラス: 'クラス名',
  コードベース: 'codeBase',
  コードタイプ: 'コードタイプ',
  colspan: 'colSpan',
  日時: 'dateTime',
  チェック済み: 'defaultChecked',
  選択: 'defaultSelected',
  値: 'defaultValue',
  フレームボーダー: 'frameBorder',
  httpequiv: 'httpequiv',
  longdesc: 'longDesc',
  マージンハイト: 'マージンハイト',
  marginwidth: 'marginWidth',
  maxlength: 'maxLength',
  nohref: 'noHref',
  noresize: 'noResize',
  noshade: 'noShade',
  nowrap: 'noWrap',
  読み取り専用: '読み取り専用',
  行インデックス: '行インデックス',
  行スパン: 'rowSpan',
  sectionrowindex: 'sectionRowIndex',
  selectedindex: 'selectedIndex',
  tabindex: 'tabIndex',
  tbodies: 'tbodies',
  tfoot: 'tFoot',
  スレッド: 'tHead',
  URL: 'URL',
  使用マップ: '使用マップ',
  valign: 'vAlign',
  値の種類: '値の種類' };
4

2 に答える 2

2

プロパティをキャメルケースにするだけです。jQuery がそれを行う方法は次のとおりです。

function camelCase (prop) {
    return prop.replace(/-([a-z])/gi, function (all, letter) {
        return letter.toUpperCase();
    });
}

次に、この関数を呼び出すことができます：

camelCase('background-color') // backgroundColor

またはコードで直接：

td.style[ camelCase('background-color') ] = 'pink';

HTML プロパティ名は通常、これと同じパターンに従いますが、いくつかの例外があります。最善の策は、ブラウザ自体で確認することです。使用したい新しいプロパティ名があるときはいつでも、その要素で次を呼び出すだけです。

console.log( element.attributes );

その要素で使用できるすべてのプロパティ名を取得します。

于 2013-01-27T04:41:57.257 に答える
2

DOM IDLは、利便性と一貫性のために、さまざまな HTML 属性を別々に公開します。つまり、COLSPAN->colSpanとCLASS->classNameです。(DOM プロパティは大文字と小文字が正規化されているため、HTML 属性は大文字と小文字を区別しないことに注意してください。)

すべての標準 HTML 属性は適切な DOM IDL (信頼できるソース) にリストされているため、提供された定義からマッピングを生成できます。ベンダー固有の属性またはまだコード化されていない属性については、他のドキュメントを参照する必要がある場合があります。

1.1.3 命名規則には次のように書かれています。

短く、有益で、内部的に一貫性があり、同様の API のユーザーになじみのある属性名とメソッド名を使用すると便利ですが、その名前は、DOM 実装でサポートされている従来の API の名前と衝突するべきではありません。さらに、OMG IDL と ECMAScript はどちらも、さまざまな名前空間からの名前のあいまいさを解消する機能に大きな制限があり、短い馴染みのある名前との名前の競合を回避することが困難です。そのため、すべての環境で一意になるように、DOM 名は長くてわかりやすいものにする傾向があります。

つまり、DOM は HTML (および XML) とうまく組み合わせようとしますが、内部の一貫性と普遍的な使用を優先します。

HTML属性background-color ではないため、質問の元の前提は正しくありませんでした。これは、DOM で公開される CSS プロパティですelm.style.backgroundColor(マッピングについては、Jospehn Siber の回答を参照してください)。

はHTML 属性でbackground-colorはないため、やなどの HTML 属性と比較することはできません。colspanclass

于 2013-01-27T04:59:48.433 に答える