javascript - Changing CSS with DOM getElementsByName -
i trying make changed css dom in js, have succeeded changing html attributes not css attributes. seems css not affected particular dom.
code looks this...
<style> #circle1{ width: 50px !important; height: 50px !important; position: absolute !important; top: 200px !important; left: 405px !important; background: black !important; border-bottom-left-radius: 50px !important; border-bottom-right-radius: 50px !important; border-top-left-radius: 50px !important; border-top-right-radius: 50px !important; z-index: 10 !important; visibility: hidden !important; } </style> </head> <body> <script type="text/javascript"> function showcircle(){ document.getelementsbyname ("circle").style.visibility="visible"; } </script> <div id="circle1" name="circle"></div> <input type="button" onclick="showcircle()" value="show circle display property"> </body>
getelementsbyname returns nodelist of elements. if want first element, so:
document.getelementsbyname("circle")[0].style.visibility = "visible"; but if have one, why not use id? <div>s shouldn't have names anyways...
document.getelementbyid('circle').style.visibility = 'visible'; if there are many, might consider using classes instead. (and classes visibility might better, too!)
finally, stop making styles !important no reason. there never reason make rules important, , can make mess of !important when specificity have made things nicer. if threw in try , fix something... made worse.
Comments
Post a Comment