Question

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',
  accesskey: 'accessKey',
  bgcolor: 'bgColor',
  cellindex: 'cellIndex',
  cellpadding: 'cellPadding',
  cellspacing: 'cellSpacing',
  choff: 'chOff',
  class: 'className',
  codebase: 'codeBase',
  codetype: 'codeType',
  colspan: 'colSpan',
  datetime: 'dateTime',
  checked: 'defaultChecked',
  selected: 'defaultSelected',
  value: 'defaultValue',
  frameborder: 'frameBorder',
  httpequiv: 'httpEquiv',
  longdesc: 'longDesc',
  marginheight: 'marginHeight',
  marginwidth: 'marginWidth',
  maxlength: 'maxLength',
  nohref: 'noHref',
  noresize: 'noResize',
  noshade: 'noShade',
  nowrap: 'noWrap',
  readonly: 'readOnly',
  rowindex: 'rowIndex',
  rowspan: 'rowSpan',
  sectionrowindex: 'sectionRowIndex',
  selectedindex: 'selectedIndex',
  tabindex: 'tabIndex',
  tbodies: 'tBodies',
  tfoot: 'tFoot',
  thead: 'tHead',
  url: 'URL',
  usemap: 'useMap',
  valign: 'vAlign',
  valuetype: 'valueType' };

Answer 1

你只需要驼峰属性。 Here's how jQuery does it：

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属性名称generally follow this same pattern，但也有一些例外情况。你最好的选择就是在浏览器中查看它。每当您有一个要使用的新属性名称时，只需在该元素上调用以下内容：

console.log( element.attributes );

您将获得该元素可用的所有属性名称。

Answer 2

为了方便和一致，DOM IDL以不同的方式公开了不同的HTML属性。也就是说，COLSPAN - ＆gt; colSpan和CLASS - ＆gt; className。（请记住，HTML属性是不区分大小写，因为在DOM属性的情况下进行大小写标准化。）

由于所有标准HTML属性都列在相应的DOM IDL（权威来源）中，因此可以根据提供的定义生成映射。可能需要查询其他文档以了解特定于供应商或尚未编码的属性。

1.1.3 Naming Conventions说：

虽然拥有简短，信息丰富，内部一致且类似API用户熟悉的属性和方法名称会很好，但名称也不应与DOM实现支持的旧API中的名称冲突。此外，OMG IDL和ECMAScript在消除不同命名空间中的名称歧义方面存在明显的局限性，这使得难以避免使用简短熟悉的名称命名冲突。因此，DOM名称往往冗长且具有描述性，以便在所有环境中都是唯一的。

也就是说，虽然DOM试图与HTML（和XML）很好地配对，但它有利于内部一致性和普遍使用。

问题的原始前提是不正确的，因为background-color 不是 HTML属性。它是一个通过elm.style.backgroundColor在DOM中公开的CSS属性（参见Jospehn Siber对映射的回答）。

由于background-color 不是HTML属性，因此无法与<{1}}或colspan等HTML属性进行比较。< / p>

是否有从HTML属性名称到DOM属性名称的映射？

2 个答案: