CODEWITHSUNDEEP
javascriptcssdomresponsive-designcss-selectors
mehdi
mehdi

Reputation: 354

How I can get css property and change the height of html element by javascript

I try to create a div element and read height from a CSS selector. finally change the div elemet height by javascript. When I use div.style.height ='15px'; work correctly but I want change height dynamically because my CSS class will change by responsive function.

My CSS is:

    #indicator {
        width: 15px;
        height: 15px;
    }

And I use this code for Script:

 div = document.createElement("div");// valve_indicator
 div.style.border = '1px solid #b3280a';

 div.style.height =document.getElementById('indicator').style.height; // instead div.style.height ='15px';
 div.style.width = '15px';
 cell.appendChild(div); // cell is a table cell

But document.getElementById('indicator').style.height return null. please help me thanks in advance

Upvotes: 1

Views: 1570

Answers (2)

mehdi
mehdi

Reputation: 354

I solve my problem by use this code

div.className='indicator';

Upvotes: 0

Furkan Atılgan
Furkan Atılgan

Reputation: 186

Remove the # in #indicator. getElementById() doesnt need # sign before the id name

document.getElementById('indicator').style.height

And if you want to dynamically change the indicator height:

let indicator = document.getElementById('indicator');
indicator.addEventListener("change", function(){
    div.style.height = indicator.style.height;
})

Upvotes: 2

Related Questions