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

Question

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

your code is incomplete,please edit your question with full js code — Mohsen007
– Mohsen007, Commented May 15, 2020 at 7:12
you first created div tag but didn't append it to Dom,then you wanted to select it,absolutely the answer in null,must first append to Dom and then select it — Mohsen007
– Mohsen007, Commented May 15, 2020 at 7:33
However, you should not enter the # sign in the selector 'getElementById' — Mohsen007
– Mohsen007, Commented May 15, 2020 at 7:35
in next line I append it in a table cell cell.appendChild(div); I edit is — mehdi
– mehdi, Commented May 15, 2020 at 7:42

Furkan Atılgan · Accepted Answer · 2020-05-15 08:45:42Z

2

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;
})

edited May 15, 2020 at 8:45

answered May 15, 2020 at 7:50

Furkan Atılgan

1867 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Furkan Atılgan Over a year ago

Is your <script> tag at the end of your <body> tag? Your javascript code can not see indicator div before its been loaded.

mehdi Over a year ago

when I use div[].style.height ='15px'; work correctly but I want change height dynamically because my CSS class is dynamic

Furkan Atılgan Over a year ago

I edited the question for dynamic change. This code should work if you are using script tag properly. Hope this helps.

mehdi · Accepted Answer · 2020-05-15 10:15:34Z

0

I solve my problem by use this code

div.className='indicator';

answered May 15, 2020 at 10:15

mehdi

3965 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related