Question

你可以看看下面的小提琴：我正在为我的项目使用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>

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

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工作......任何关于为什么的想法？

----------------------------------------------- ------------------------------------------------- < / H2>

更新

iv used

'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>，其中cellpadding位于正确的位置，但它不会更改表格布局中的任何内容？任何想法？＆gt;

当我使用时：

     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" );

使用DOM，JS动态地向html表添加样式

这不起作用

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

1 个答案: