Question

in my code there’s a css style Settings for all table headers – <th>

i did not make settings for Css my self but until now it was ok for me so i didn’t try to edit those .

but now that i have to print the page, and font color set to #ffffff
it sure looks nice on a backGround but on print out it will not show

my css is made out like this

    #TBLtime th , #TBLparam1 th , #TBLparam2 th
    {
    font-size:12px;
    text-align:right;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
    }

so id selector is per element , how do you make it easier to control /modify from javascript

say i need to alter color property . how will i be able to access it from javascript ?

    function DocPrnt() {
        document.getElementById(id).style.color = "black";
        print();
    }

is there a better option for a selector to be easy to access from JS or this is common approach ?

Answer 1

Well, for a pure JavaScript solution, this may work:

function DocPrnt() {
    var headerCells = [],
        i = 0;
    headerCells = document.getElementsByTagName('th');
    for (i = 0; i < headerCells.length; i += 1) {
        headerCells[i].style.color = "#000000";
    }
    print();
}

Personally, I’d just add a new stylesheet for printing only:

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />