how to change css for a seletor when the selector doesn't exist javascript / jquery


Tags: javascript,jquery,css,cross-browser

Problem :

I have an html file which links to an external css file which has this

#bottomBar td {
    background-color: red;
}

Now in my javascript, I need something which, if the browser is IE 10, it makes background-color be blue instead of red. Here is what I tried to put in my script

if (Function('/*@cc_on return document.documentMode===10@*/')()) { // this checks if it is IE 10
    $('#bottomBar td').css('background-color', 'blue');
}

this doesn't work because it doesn't loop through each bottomBar td since there are none yet. All I want to do is change the actual css regardless of if there is a #bottomBar td or not, I want to be able to change the CSS for it. Any idea how to do this? I want to change the actual text in my css but using

$('#bottomBar td').css('background-color', 'blue');

doesn't work since the selector

$('#bottomBar td')

doesn't exist, it doesn't change the background color to red from blue. Note that I have restrictions and cannot use more than one stylesheet and cannot add or remove any additional classes.



Solution :

$('body').append('<style>#bottomBar td { background-color: blue; }</style>');


    CSS Howto..

    How to specify size of thumbnails for photos that are hosted externally?

    How to reach CSS zen?

    How to set the select to have the width of the selected option

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How to design HTML header

    How to override nth-child

    CSS - How to make a div's padding not affect the positioning of the div below it

    how to highlight specific control with css [duplicate]

    How do I use the Bootstrap form select css with a Rails model?

    how to use font-faces in css file within spring 3

    how to add css background color for div tag

    How to calculate sine, cosine in Less?

    How can I change input type of Yii CJuiAutoComplete?

    How did overflow actually work here?

    How to recalculate the css url paths when moving it to a different folder

    How do I create a margins on Google maps? [closed]

    How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

    How to change tooltip color on open using jQuery UI Tooltip?

    How to make images inside a box responsive CSS

    How to ensure three DIV are the same height regardless of content

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    how to rewrite relative url in minified css with cssmin?

    how to center a box using blueprint css framework

    how to align vertically a dynamic-height div inside another fixed height div

    how to align right hand side image on top of text on mobile screen

    How to get less to output a css variable with quotes

    How can I have my cards stack on top of one another?

    how to size the silverlight object to available space

    How to set link visited color in JQuery

    How to determine if image is hyperlinked?