javascript - Add CSS class to change style of HTML element -
@charset "utf-8"; html, body { margin: 0px; font-family: helvetica, sans-serif; min-height: 100%; height: 100%; } .center-container { display: flex; align-items: center; justify-content: center; height: 100%; /*height: 500px;*/ } .main-container { /*height: 100%;*/ } .darktitle { color: #000000; background: grey; font-size: 25px; } .titlebar { text-align: center; color: #ff0000; background: blue; font-size: 40px; } button { padding: 00px; font-weight: bold; font-size:1em; font color: #000000; height: 40px; width: 200px; }
<!doctype html> <html lang="de"> <head> <link href="styles/styles.css" rel="stylesheet"/> <meta charset="utf-8"> </head> <body> <div class="main-container"> <h1 id="titlebar" class="titlebar"> titlebar</h1> <div class="center-container" > <button id="button1">button1</button> <button id="button2">button2</button> <button id="button3">button3</button> </div> </div> <script> var titlebar = document.queryselector('h1#titlebar'); var button1 = document.queryselector('#button1'); var button2 = document.queryselector('#button2'); var button3 = document.queryselector('#button3'); button1.addeventlistener('click', function() { titlebar.innerhtml = 'button1'; var result = titlebar.classlist.contains('darktitle'); console.log(result); titlebar.classlist.add('darktitle'); var result = titlebar.classlist.contains('darktitle'); console.log(result); }); </script> </body> </html>
hey earthlings,
i started learning html , css. i'm dealing style classes. created simple example. want reach is, titlebar changes font color, font-size , background color if button1 clicked.
initially titlebar has appended titlebar-class, after button1 clicked darktitle-class should added , overwrite attributes. in configuration doesn't happen. if change order of .darktitle , .titlebar class in css file works. wonder why.
the css styles should on same priority level, expect laterly assigned overwrite attributes.
tnx
you can use !important override styles this
.darktitle { color: #000000!important; background: grey!important; font-size: 25px!important; }
Comments
Post a Comment