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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -