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