CSS ändern per jquery


head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
</script>

img#cc-m-imagesubtitle-image-12585396823 {

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7265bd+0,ded7f3+100 */
        background: rgb(245,245,245); /* Old browsers */
        background: -moz-linear-gradient(-45deg,  rgba(0,0,0,.31) 0%, rgba(55,55,55,.1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,.31) 0%,rgba(55,55,55,.1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(105deg,  rgba(0,0,0,.31) 0%,rgba(55,55,55,.1) 100%); /* W3C, IE10+, FF16+, Chrome26+,
pera12+, Safari7+ */
    }

</style>

html:

<a href="#" id="blue" onclick="blue()" name="blue"><img src=

"https://image.jimcdn.com/app/cms/image/transf/dimension=60x60:mode=crop:format=png/path/sbcfc830c2d85c206/image/i6a71e028e23fac21/version/1461071257/image.png" data-orig-width="1040"

data-orig-height="612" alt="" /></a>

<script type="text/javascript">

    //<![CDATA[

    function blue() {

        $('head').append('<style type="text/css">img#cc-m-imagesubtitle-image-12585396823 {background: rgb(114,101,189); /* Old browsers */background: -moz-linear-gradient(-45deg,  rgba(114,101,189,1) 0%, rgba(222,215,243,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(-45deg,  rgba(114,101,189,1) 0%,rgba(222,215,243,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(35deg,  rgba(114,101,189,1) 0%,rgba(222,215,243,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */<\/style>');

    }

    //]]>

</script>

 

CSS ändern über "document.getElementById"

document.getElementById: red

<script type="text/javascript">

//<![CDATA[

    var x = document.getElementById("cc-m-13418399224");   // Get the element with id="demo"

    x.style.color = "red";   // Change the color of the element

//]]>

</script>

CSS ändern per "document.getElementById"

<script type="text/javascript">

//<![CDATA[

document.getElementById('cc-m-13418410324').style.color = "blue";

//]]>

</script>

CSS ändern über "document.getElementById"

<script type="text/javascript">

//<![CDATA[

    // Ausblenden

    document.getElementById('cc-nav-view-2577975024').style.display = 'none';

    // Einblenden

    //document.getElementById('cc-nav-view-2577975024').style.display = '';

//]]>

</script>

CSS ändern über createElement ("STYLE")

<script type="text/javascript">

//<![CDATA[

window.onload = function()  {

    var x = document.createElement("STYLE");

    var t = document.createTextNode(".navigation-colors li a:hover, .navigation-colors li a:active, .navigation-colors li a:focus, .navigation-colors li.cc-nav-current>a:link, .navigation-colors li.cc-nav-current>a:visited, .navigation-colors li.cc-nav-parent>a:link, .navigation-colors li.cc-nav-parent>a:visited {color: #D43131; }");

    x.appendChild(t);

    document.head.appendChild(x);

}

//]]>

</script>

button onclick="myFunction()"


The created style element contains css declarations that will change the font properties of this document.