How to call a CSS file with JavaScript or CSS

Question

I am using wordpress I have some CSS problems and I want to overrite some rules. How can I call this CSS file with JavaScript or CSS, and how to modify a specific class in it ? and is that possible?

You can "call" a CSS file directly form the HTML file *after* the CSS rules that you want to overwrite — tardis, Feb 03 '17 at 10:08
You can download the custom css/js plugin. It will allow you to override styles easily — Robbin van der Jagt, Feb 03 '17 at 10:08
If you want to learn more about inheritance and cascade rules (html and css), I find [this document](https://www.w3.org/wiki/Inheritance_and_cascade) helpful. — rasmeister, Feb 03 '17 at 10:12
You can check this question [How to load up CSS files using Javascript?](http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript) — Ronniemittal, Feb 03 '17 at 10:14
Possible duplicate of [How to load up CSS files using Javascript?](http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript) — Alexandre Neukirchen, Feb 03 '17 at 10:19
@IRSHAD Yes inline css , @ molotow the file is already used but I want to change some rules in it @ Robbin Well I have the possibility to add my custom css ,; but the problem that I want to customise a specific css file , how to call it or override it — Lina Hammami, Feb 03 '17 at 10:19
You most probably want to create a [child theme](https://codex.wordpress.org/Child_Themes) and define your styles in the child theme's style.css. — giorgio, Feb 03 '17 at 10:20
@linahamemi, you can use important keyword with your inline css like — IRSHAD, Feb 03 '17 at 10:22

IRSHAD · Answer 1 · 2017-02-03T10:56:38.100

You can directly add your CSS file into html file like this-

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

And by using the JavaScript simply call this function-

function loadCSS(filename) 
{
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)

    if (typeof fileref != "undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

And by using the JQuery use one liner statement below-

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');

And if you are trying to overwrite the CSS rule you can use Inline CSS with important keyword like below-

<span id="shoesdekho" style="text-transform: none;!important">

Another method by JavaScript you can dynamically add the CSS using below method-

function loadCSSdynamically(str)
{
    if(str == '')
    {           
        $('#titleDiv').css('display', 'none');
        return 0;       
    }
    var site_base = '<?php echo BASE_URL;?>';


    $('#titleDiv').css('display', '');
    $('#titleDiv').css('border', '0.5px solid #ccc');

    $.ajax({
        type:"GET",
        data:"str="+str+"&t=h",
        url:site_base+"shoesdekho.php",
        success:function(msg){
        if(msg!='0'){
            $('#titleDiv').css('display', '');
            $('#titleDiv').css('border', '0.5px solid #ccc');
            }

        }
    });
}

The file is already uploaded, my problem is that I want to call a css file with javascript to change some rules with javascript — Lina Hammami, Feb 03 '17 at 10:23
@linahamem, I have updated the answer with Inline CSS, you must use !important keyword to overwrite your existing CSS rule. — IRSHAD, Feb 03 '17 at 10:25
@linahamemi, have you got your answer??? If yes then please select the answer with your vote and close the answer else describe your exact problem with example. — IRSHAD, Feb 03 '17 at 10:38
no am still trying , I'll close it when I resolve my problem — Lina Hammami, Feb 03 '17 at 10:46

score 0 · Accepted Answer · answered Feb 03 '17 at 10:17

0

If you are using jquery, u can do something like this:-

method1 (jquery):

<script>
$( "div" ).click(function() {
  var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
});
</script>

If u r using angular-custom-directives, u can trap the same within a linker-function, like this:-

method1 (angular):

link: function(scope, element, attrs){
      var element1 = element[0];
      element.style.width = "250px";
      // n so on
}

method2 (angular):

another way is to use ng-style inbuilt directive to which u can assign any javascript object.

answered Feb 03 '17 at 10:17

Plankton

388
3
13

I think the first method is suitable for me ,; I'll give it a try , thank you – Lina Hammami Feb 03 '17 at 10:41
can you just clarify the code more for me ,I wanted to call a css file named "rtl.css" and to override a class named "header#siteheader #logo .nav-toggle" – Lina Hammami Feb 03 '17 at 11:03

How to call a CSS file with JavaScript or CSS

2 Answers2