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 = {
  接受字符集：'接受字符集'，
  访问密钥：'访问密钥'，
  bgcolor: 'bgColor',
  细胞指数：'细胞指数'，
  细胞填充：'细胞填充'，
  细胞间距：'细胞间距'，
  choff: 'chOff',
  类：'类名'，
  代码库：'代码库'，
  代码类型：'代码类型'，
  colspan: 'colSpan',
  日期时间：'日期时间'，
  检查：'defaultChecked'，
  选择：'defaultSelected'，
  值：'默认值'，
  框架边框：'框架边框'，
  httpequiv: 'httpEquiv',
  longdesc: 'longDesc',
  marginheight: 'marginHeight',
  边距宽度：'边距宽度'，
  最大长度：'最大长度'，
  nohref: 'noHref',
  noresize: 'noResize',
  noshade: '无阴影',
  nowrap: 'noWrap',
  只读：'只读'，
  行索引：'行索引'，
  行跨度：'行跨度'，
  sectionrowindex: 'sectionRowIndex',
  selectedindex：'selectedIndex'，
  tabindex: 'tabIndex',
  tbodies: 'tBodies',
  tfoot: 'tfoot',
  头：'头'，
  网址：'网址'，
  使用地图：'使用地图'，
  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。（请记住，HTML 属性不区分大小写，因为它是大小写规范的，而 DOM 属性是。）

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

1.1.3 命名约定说：

虽然属性和方法名称应该简短、信息丰富、内部一致并且为类似 API 的用户所熟悉，但这些名称也不应该与 DOM 实现支持的遗留 API 中的名称发生冲突。此外，OMG IDL 和 ECMAScript 在区分来自不同名称空间的名称的能力方面都有很大的局限性，这使得难以避免与短而熟悉的名称发生命名冲突。因此，DOM 名称往往很长且具有描述性，以便在所有环境中都是唯一的。

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

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

因为background-color它不是HTML 属性，所以无法与 HTML 属性（例如colspan或）进行比较class。

于 2013-01-27T04:59:48.433 回答