1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<style>
.toto {
font-family: verdana;
font-size: 2rem;
}
.toto:hover {
background-color: yellow;
font-size: 3rem;
}
</style>
<script>
'use strict';
function changeCSS( className, anElement, aValue ){
let
cssR = document.styleSheets[ 0 ].cssRules,
myCSS, modifie, arrOLd, arrNew, arrTemp;
for ( let [ i, item ] of Array.from( cssR ).entries() ){
myCSS = item.cssText;
if ( myCSS.match( "^" + className ) ){
arrOLd = ( myCSS.match( /\{(.+)\}/ ) )[ 1 ].split(';'),
modifie = false,
arrNew = [];
for ( let [ j, jtem ] of arrOLd.entries() ){
arrTemp = jtem.split(':');
if ( arrTemp[ 0 ].trim() == anElement.trim() ){
arrNew[ j ] = anElement + ':' + aValue;
modifie = true;
} else {
arrNew[ j ] = jtem;
}
}
if ( ! modifie ){
arrNew[ arrNew.length ] = anElement + ':' + aValue;
}
document.styleSheets[ 0 ].deleteRule( i );
document.styleSheets[ 0 ].insertRule( className + ' {' + arrNew.join( ';' ) + '}', i );
}
}
}
document.addEventListener( 'DOMContentLoaded', ev => {
}, false );
window.addEventListener( 'load', ev => {
}, false );
</script>
</head>
<body>
<main>
<div>
<button onclick="changeCSS( '.toto', 'font-size', '1rem' )">Change font-size de toto</button>
</div>
<div>
<a class="toto" href="">123456789</a>
</div>
</main>
</body>
</html> |
Partager