JavaScript获取HTML表对象的边框样式

我正在编写一些JavaScript，将一个表包装到一个div中。我希望为div元素提供与源表相同的边框样式

我应该能够以编程方式在DOM中查询表并获取其边框设置，但是当我在运行时检查表样式对象的属性时，它们是空字符串

如何复制现有元素的样式设置

提前谢谢

编辑：源代码

---

HTML测试代码

        <table id="tbWorking" class="tbTest">
            <tr class="trTest">
                <th class="tdTest">Col1</th>
                <th class="tdTest">Col2</th>
            </tr>  
            <tr class="trTest">
                <td class="tdTest">a</td>
                <td class="tdTest">b</td>
            </tr>
            <tr class="trTest">
                <td class="tdTest">c</td>
                <td class="tdTest">d</td>
            </tr>
            <tr class="trTest">
                <td class="tdTest">e</td>
            </tr>        
        </table>

        <script type="text/javascript" src="TempTestingTables.js"></script>

---

页面的本地JavaScript

    // Set a custom flag to indicate that the document has not yet loaded
    onLoad.loaded = false;
    // Register a function on the window object that sets the flag true when the document is loaded
    onLoad(function () { onLoad.loaded = true; });
    // This should then allow the FC function addEvent() to browser-agnostically 
    // register handlers for controls on startup

    // Once the page has loaded, set the background colour of the order ticket
    // based on the Buy/Sell selection
    onLoad(prepareTables());

    function prepareTables() {
        // Function to prepare the tables are scrollable
        prepTable("tbWorking",2);
    }

    function prepTable(sTable, rowsToShow) {

        // Pass in a table, and the number of data rows, not including the header, to display

        var tableSource = document.getElementById(sTable);
        if (tableSource == null) { return; }

        var rowHeight = GetTableRowHeight(sTable);

        var countRows = tableSource.rows.length;
        if (countRows == null || countRows == 0)
            return;

        // There is at least one row

        // Copy the table
        var tableCopy = tableSource.cloneNode(true);
        tableCopy.id = sTable + "_header";

        // Delete all except the first row
        var i = 1;
        for(;i < countRows;++i)
        { tableCopy.deleteRow(1); }

        // Insert the copy above the source table
        (tableSource.parentNode).insertBefore(tableCopy, tableSource);

        // Get the height of the header for later when we need to account for it in the wrapper tableDiv element
        var heightHeader = tableCopy.offsetHeight;


        // Move top row to the end of the table
        var rowHeaderCopy = tableCopy.rows[0].cloneNode(true); // copy the row
        rowHeaderCopy.style.visibility = "hidden"; // stop the row being displayed, but still let it contribute to layout
        tableSource.appendChild(rowHeaderCopy);

        // Hide the first row of the source table
        //tableSource.rows[0].style.display = "none"; 
        // Re-think: Delete the first row of the source table to stop it jiggering the sorting
        tableSource.deleteRow(0);


        // Wrap the source table in a div tag that is fixed size, to give us vertical scrolling on the body only   

        var bodywrapper = document.createElement("div");
        bodywrapper.id = "divBody_" + sTable;
        bodywrapper.style.overflow = "auto";

        var heightRequired = rowsToShow * rowHeight;
        bodywrapper.style.height = heightRequired + "px";

        var widthTableSource = tableSource.offsetWidth;
        var widthRequired = widthTableSource + getScrollBarWidth();
        bodywrapper.style.width = widthRequired + "px";

        // Get the border style of the table and make the div have the same style,
        // And then turn off the border style of the body (maybe, still designing).
        //var border = tableSource.style.getAttribute("border-width"); // Attempt to read style FAILED
        //var style = document.defaultView.getComputedStyle(tableSource, ""); // Attempt to read Computed Style FAILED
        //bodywrapper.style.border = "black 1px solid"; // Hard coded bodge

        // The node to wrap is the tableSource
        tableSource.parentNode.insertBefore(bodywrapper, tableSource);
        tableSource.parentNode.removeChild(tableSource);
        bodywrapper.appendChild(tableSource);

        // Wrap the whole lot in another DIV element to give us horizontal scrolling for header and body
        var tablewrapper = document.createElement("div");
        tablewrapper.id = "divTable_" + sTable;
        tablewrapper.style.overflow = "auto";

        // Height of the outer wrapping DIV is the header height, plus body height, plus one scrollbar
        tablewrapper.style.height = 1 + getScrollBarHeight() + heightHeader + heightRequired + "px"; 

        // Width of the out DIV is default, 100%, so that scrollbar only appears 
        // if table is wider than available screen real estate.

        tableCopy.parentNode.insertBefore(tablewrapper, tableCopy); // Put the tablewrapper DIV in front of the header
        tableCopy.parentNode.removeChild(tableCopy); // Cut the header out
        bodywrapper.parentNode.removeChild(bodywrapper); // Cut the table body out
        tablewrapper.appendChild(tableCopy); // Add the header to the contents of the tablewrapper DIV
        tablewrapper.appendChild(bodywrapper); // Add the table body to the contents of the tablewrapper DIV
    }

    function GetTableRowHeight(sTable) {
        var table = document.getElementById(sTable);
        if (table == null) { return 32; }
        var countRows = table.rows.length;
        var heightTable = table.offsetHeight+1;
        return (heightTable / countRows);
    }

---

解决方案：

下面的函数应该不可知地查询元素的样式对象，并返回所需的内容。当然，JQuery会更可靠，这是毫无疑问的。我决定不借用表的边框，因为它使整个操作非常复杂，而且容易出错，因为实际上这只是一个很好的边框。但是，下面的函数很有用，其他人也可能会觉得它很有用。请记住，IE返回em和百分比。如果样式是这样设置的，它不会为您转换为px。毕竟，你为什么要这样？（哈哈，对不起）

---

为什么要这样做，而不是将表和div都赋予同一个类，然后将边框样式放在该类中，而不是内联到表中

另外，何时检查样式对象的属性？怎么用？需要查看您的代码。如果您试图在DOM准备就绪之前获取这些样式（在某些情况下，如在触发DOM.onload之前），那么对象将不会准备就绪，也不会返回任何值

编辑

好的，考虑到上面的代码，我能让您对CSS进行一次轻微的重构吗？：）

让我们来看看这个：

.tbTest
{
    empty-cells: show;    
    border-collapse:separate; /* Table and Cell borders are unique */

    border-width:1px;
    border-style:solid;
    border-color:Navy;

    background-color:#DDDDDD; /* Colour of gaps between cells */
    color:Black; /* Text colour */
}

并将其分开，以便将特定于表格的样式与边框样式分开：

.tbTest
{
    empty-cells: show;    
    border-collapse:separate; /* Table and Cell borders are unique */
    background-color:#DDDDDD; /* Colour of gaps between cells */
    color:Black; /* Text colour */
}

.borderSpec 
{
    border:1px solid Navy;
}

将.borderSpec添加到表中：

    <table id="tbWorking" class="tbTest borderSpec">
        <tr class="trTest">
            <th class="tdTest">Col1</th>
            <th class="tdTest">Col2</th>
        </tr>  

这样做的目的是从表中删除borderSpec，并将borderSpec添加到包装器div中，以便包装器获得边框，而表不会

---

jsFiddle，here:

如果dom试图“重新组织”/“修复”您的代码，请使用firebug或类似的方法检查该表：

<table>
    <tbody>
    </tbody>
</table>

---

和tbody包含border属性。

如何检查这些设置？使用Visual Studio 2010运行时JavaScript调试进行检查，在查询表元素的点处使用F9分隔符。Table是一个asp:GridView，呈现到它的底层表格html代码中，但为了测试，我使用了一个声明性html中的手工拼凑的小表格，以消除这种情况下的任何asp问题。我不确定该如何做。这个表没有tbody标签，它是一个非常简单的测试表，只使用table、tr和td元素。CSS类是。tbTest{空单元格：显示；边框折叠：单独；边框宽度：1px；边框样式：纯色；边框颜色：海军蓝；背景色：#DDDDDD；颜色：黑色；}.trTest{背景色：#DAD7FA；边框宽度：8px；边框颜色：红色；边框样式：纯色；}.tdTest{padding:15px；border color:#7D72FC；border width:1px；border style:solid；}样式设置是通过CSS完成的。如果给表和div赋予相同的类（比如solid 1px black）该表有一个1px边框，而div有一个1px边框，使整个表有一个2px边框。目的是编写一些JavaScript来获取一个现有表，并以编程方式在其周围包装一个div以提供一个滚动条，而不会明显地对表进行太多更改。文档还没有准备好这一点很好。我使用了David Flanagan的代码s O'Reilly JavaScript书，使用onLoad（）函数触发我的JS函数，只有在DOM触发加载事件并且文档准备好操作时才触发。问题是手动传输样式会使您的逻辑变得脆弱…将它们分离到CSS中，并且只切换CSS类，入侵性更小。您也在艰难地完成这一切，使用老式的简单的Javascript…这没什么错，如果您的目的是学习更多关于Javascript的知识，并且不想完全依赖于jQuery之类的库，但我向您保证，如果您使用jQuery，您可以减少大量这类代码，并且它可以帮助防止大量跨浏览器的乱码，而这正是使用直接查询所需要的啊，但是逻辑依赖于结构正确的CSS文件。我知道如果有人在设计一个表，它可能有CSS类，也可能没有CSS类，但我知道它总是以计算的样式结束。我想做的是从图片中删除CSS，这样表就可以得到它的边框样式（CSS，HTML中的declaritive，随便什么）代码可以说“不管当前的表边框样式是什么，捏一下它，将它应用到div中，然后将其置为null”。这样，代码就不那么脆弱了，而且不管怎样都可以窃取边框样式。

.tbTest
{
    empty-cells: show;    
    border-collapse:separate; /* Table and Cell borders are unique */
    background-color:#DDDDDD; /* Colour of gaps between cells */
    color:Black; /* Text colour */
}

.borderSpec 
{
    border:1px solid Navy;
}

    <table id="tbWorking" class="tbTest borderSpec">
        <tr class="trTest">
            <th class="tdTest">Col1</th>
            <th class="tdTest">Col2</th>
        </tr>  

function prepTable(sTable, rowsToShow) {
    var tableSource = document.getElementById(sTable);
    if (tableSource == null) { return; }

    // clear off the borderSpec from your tableSource
    tableSource.setAttribute("class","tbTest");

    /* ... snip ... */

    // Wrap the whole lot in another DIV element to give 
    // us horizontal scrolling for header and body
    var tablewrapper = document.createElement("div");
    tablewrapper.id = "divTable_" + sTable;
    tablewrapper.style.overflow = "auto";

    // Now, add borderSpec to your wrapper-div
    tablewrapper.setAttribute("class","borderSpec");

<table>
    <tbody>
    </tbody>
</table>