如何使用Javascript或jQuery来检索应用于网页任何内容的css样式？ [英] How can I retrive css style applied for any content of a webpage using Javascript or jQuery?
本文介绍了如何使用Javascript或jQuery来检索应用于网页任何内容的css样式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用html创建了一个网页。
我也在不同的内容上应用了不同的内联和轮廓样式。
现在我想要回溯css应用于每个内容，如标题，段落，标准，表格。
是否可以检索应用于不同内容的CSS样式？
I have created a webpage using html.
I have also applied different inline and outlinel style on different content.
Now I want to retrive the css applied on each content like header, paragraph, td, table.
Is it possible to retrive css style applied on different content?
<html>
<head>
<title>Print Test Page</title>
<link rel="stylesheet" href="PdfPrintingStyleSheet.css" type="text/css" />
<script>
printDivCSS = new String('<link href="PdfPrintingStyleSheet.css" rel="stylesheet" type="text/css">')
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML = printDivCSS + document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
</script>
</head>
<body>
<h1 style="color:red">This is a test page for printing</h1>
Div 1: <a href="java<!-- no -->script:printDiv('div1')">Print</a><br>
<div id="div1">This is the div1's print output</div>
<br><br>
Div 2: <a href="java<!-- no -->script:printDiv('div2')">Print</a><br>
<div id="div2" style="color:red">This is the div2's print output</div>
<div id="div2" style="color:red" class="tblcss">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Telephony By Country</td>
<td>Jan-2013</td>
<td>Feb-2013</td>
<td>Mar-2013</td>
</tr>
<tr>
<td class="tdhighlight">Calls Offered</td>
<td>33555</td>
<td>28201</td>
<td>27563</td>
</tr>
<tr>
<td class="tdhighlight">Calls Answered</td>
<td>32042</td>
<td>27030</td>
<td>26273</td>
</tr>
<tr>
<td class="tdhighlight">Calls Answered in 30 Secs</td>
<td>29484</td>
<td>24874</td>
<td>24368</td>
</tr>
<tr>
<td class="tdhighlight">Calls Answered in 30 Secs %</td>
<td>92.02%</td>
<td>92.02%</td>
<td>92.75%</td>
</tr>
<tr>
<td class="tdhighlight">Calls Abandoned (Greater 30 Secs)</td>
<td>478</td>
<td>342</td>
<td>333</td>
</tr>
<tr>
<td class="tdhighlight">Abandon Rate (<5%)</td>
<td>1.42%</td>
<td>1.21%</td>
<td>1.21%</td>
</tr>
<tr>
<td class="tdhighlight">Average Call response time (secs)</td>
<td>6.91</td>
<td>5.14</td>
<td>4.89</td>
</tr>
<tr>
<td class="tdhighlight">Total number of emails received</td>
<td>100201</td>
<td>92546</td>
<td>100559</td>
</tr>
<tr>
<td class="tdhighlight">Average Email Queue time (hrs) - Incident</td>
<td>0.66</td>
<td>0.69</td>
<td>0.62</td>
</tr>
<tr>
<td class="tdhighlight">Average Email Queue time (hrs) - Request</td>
<td>1.61</td>
<td>1.41</td>
<td>1.31</td>
</tr>
</table>
</div>
<br><br>
Div 3: <a href="java<!-- no -->script:printDiv('div3')">Print</a><br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>
</html>
推荐答案
使用jquery：
包含在头部
Using jquery:
Include in the head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
如果你想在某些DOM元素上获得某种风格，请使用：
下面的代码将返回divId元素的颜色值。
If you want to get certain style on certain DOM element, use this:
The code below will return the value of color of divId element.
（' ＃' + divId）.css（' color '）;
('#' + divId).css('color');
如果您想获得所有内联和大纲样式，请使用此功能：
If you want to get all inline and outline style, use this funtion:
<script>
function printDiv(divId) {
var style =
（ ＃div2）。getStyleObject（）;
("#div2").getStyleObject();
这篇关于如何使用Javascript或jQuery来检索应用于网页任何内容的css样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
