javascript - 动态地向 html 表添加样式 - 使用 DOM、JS

Question

你能看看下面的 fiddle 吗:..我正在为我的元素使用 JS

http://jsfiddle.net/dgqr2nLd/7/

我有我想要的表格布局，包括填充、边框颜色等...

但是在我的元素中我似乎无法得到这个结果。我正在使用 DOM 元素在我的应用程序中动态创建一个 html 表，inner.html 如下:

<ul>
    <li><a href="#tabs-1">Info</a></li>
    <li><a href="#tabs-2">Images</a></li>
</ul>
<div id="tabs-1">
    <center>
        <b><font color="FF6600"> Feature Properties </font></b>
    </center>
    <br>
    <table>
        <tbody>
            <tr>
                <td><b>id</b></td>
                <td>11079<br></td>
            </tr>
            <tr>
                <td><b>one</b></td>
                <td>d<br></td>
            </tr>
            <tr>
                <td><b>two</b></td>
                <td>d<br></td>
            </tr>
            <tr>
                <td><b>three</b></td>
                <td>d<br></td>
            </tr>
        </tbody>
    </table>
</div>
<div id="tabs-2">
    <a id="lb1" href="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" rel="lightbox[me]">
        <img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="200" height="200">
    </a>
</div>

所以 iv 厌倦了通过以下方式更新表格的表格外观:

var Newtable = document.createElement('table');
Newtable.rules = "all";
Newtable.cellpadding = "10px 10px 10px 10px";
NewTable.style = "border: 1px solid #CCCCCC";

这没用

---

尝试过

    NewTable.class = "WorkFlowLayout"

 .WorkFlowLayout
    {
        rules=all;
         cellpadding=10px 10px 10px 10px;
          border: 1px solid #CCCCCC;
    }

这没用

-------------------------------------------- ----------------------------------------------

我可以通过使用来显示边框

Newtable.border = "1";

但是无法获得规则，或者 cellPadding 无法正常工作...知道为什么吗？

-------------------------------------------- ----------------------------------------------

更新

用过

'var Newtable = document.createElement('table');
 Newtable.setAttribute('border', '1');
 Newtable.setAttribute("cellPadding", "20px 20px 20px 20px");`

这会返回 <table border="1" cellpadding="20px 20px 20px 20px"> <tbody><tr><td><b>id</b></td><td>13083<br></td></tr><tr><td><b>one</b></td><td>ujuj<br></td></tr><tr><td><b>two</b></td><td>uju<br></td></tr><tr><td><b>three</b></td><td>ujuj<br></td></tr></tbody></table>哪个单元格填充在正确的位置，但它不会改变表格布局中的任何内容？有什么想法吗？>

还有当我使用时:

     var Newtable = document.createElement('table');
        NewTable.setAttribute("className","WorkFlowLayout");

    .WorkFlowLayout
{
   /* rules:all;
     cellpadding:10px 10px 10px 10px; */
      border: 1px solid #CCCCCC;
}

这会用 NewTable.setAttribute("className","WorkFlowLayout"); 标记错误说 newTable 不存在，因为当我动态创建它并将它传回时它不存在。我如何从这里添加样式谢谢？

Answer 1

当通过 JS 操作一些 DOM 元素的样式时，为该元素设置一个新的类名可能是最简单的方法。所以我会采用您的第二种方法。

其中只有一个小错误 - 它是 Element.className 而不是 Element.class。

当使用以下内容时，您的第二个示例应该会按预期工作:

// This will overwrite any existing class names
NewTable.className = "WorkFlowLayout";

// This would add another class to an existing list of class names
NewTable.classList.add( "WorkFlowLayout" );