How can I retrive css style applied for any content of a webpage using Javascript or jQuery?

Question

0.00/5 (No votes)

See more:

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

<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>

Posted 13-Aug-14 19:44pm

sachi Dash

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Trung Nguyen Son · Answer 1 · 2014-08-13T20:24:00

Using jquery:
Include in the head

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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.

JavaScript

$('#' + divId).css('color');

If you want to get all inline and outline style, use this funtion:

JavaScript

<script>
function printDiv(divId) {
var style = $("#div2").getStyleObject();
$("#div1").css(style);//This function will copy all style of div2 to div1.
}
/*
* getStyleObject Plugin for jQuery JavaScript Library
* From: http://upshots.org/?p=112
*
* Copyright: Unknown, see source link
* Plugin version by Dakota Schneider (http://hackthetruth.org)
*/
(function ($) {
    $.fn.getStyleObject = function () {
        var dom = this.get(0);
        var style;
        var returns = {};
        if (window.getComputedStyle) {
            var camelize = function (a, b) {
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for (var i = 0; i < style.length; i++) {
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if (dom.currentStyle) {
            style = dom.currentStyle;
            for (var prop in style) {
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);
</script>

If you want to list all the style rules of an element, just loop through it!

Hope this help!