Changing CSS with DOM getElementsByName

javascript css dom getelementsbyname
Mark H picture Mark H · Apr 20, 2013 · Viewed 11.8k times · Source

I am trying to make changed to CSS with the DOM in JS, I have succeeded with changing the HTML attributes but not the CSS attributes. It seems that CSS is not affected by this particular DOM.

Code looks like 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 with display property">
</body>

Answer

Sachin picture Sachin · Apr 20, 2013

Try this

function showCircle(){
    document.getElementsByName("circle")[0].style.visibility="visible";  
}

and remove !important from css class for visibility attribute

JS Fiddle Example

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Check if an element contains a class in JavaScript?

Using plain JavaScript (not jQuery), Is there any way to check if an element contains a class? Currently, I'm doing this: The issue is that if I change the HTML to this... <div id="test" class="class1 class5">&…

Read More
Uncaught TypeError: Cannot read property 'top' of undefined

I apologize if this question has already been answered. I've tried searching for solutions but could not find any that suited my code. I'm still new to jQuery. I have two different types of sticky menus for two different pages. …

Read More