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 name
s 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