Setting Div Width and Height in JavaScript

Setting DIV width and height in JavaScript

The properties you're using may not work in Firefox, Chrome, and other non-IE browsers. To make this work in all browsers, I also suggest adding the following:

document.getElementById('div_register').setAttribute("style","width:500px");

For cross-compatibility, you will still need to use the property. Order may also matter. For instance, in my code, when setting style properties with JavaScript, I set the style attribute first, then I set the properties:

document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";

Thus, the most cross-browser compatible example for you would be:

document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';

I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files. Not only will your code be much more maintainable, but you'll actually make friends with your Web designers!

document.getElementById("div_register").setAttribute("class","wide");

.wide {
    display:block;
    width:500px;
}

.hide {
    display:none;
}

.narrow {
    display:block;
    width:100px;
}

Now, I can easily just add and remove a class attribute, one single property, instead of calling multiple properties. In addition, when your Web designer wants to change the definition of what it means to be wide, he or she does not need to go poking around in your beautifully maintained JavaScript code. Your JavaScript code remains untouched, yet the theme of your application can be easily customized.

This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).

How to set div tag height and width using javascript?

You need to use

document.getElementById('set').style.width = maxX + "px";

and

document.getElementById('set').style.height = maxY + "px";

Also, you may need to make sure the document is loaded before the script runs, or else the set div may not have been created. You do this in window.onload as foillows:

window.onload = function ()
{
  Javascript code goes here
} 

How resize a div height based on width with pure JavaScript

You need to find the current width of the element and then reset its height.

Here's a simple example of doing that. It is using offsetWidth to get the current width, but depending on your use case that may or may not be good enough. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

Typically, offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after. If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.

// Function to set the height of an element proportional to its width
// el is the element we are interested in.
// ratio is the ratio of width to height that we want
function setHeight(el, ratio) {

// first we need to find out what the width of el currently is
  const w = el.offsetWidth; //this will always return an integer
  console.log(w);
  el.style.height = (w * ratio) + 'px';

//note you could also investigate getBoundingClientRect().width for a more general case when there have been transformations
}

<div class="element" style="width: 200px; height: 200px; background-color: magenta;" onclick="setHeight(this, 600/300);">Click me</div>

Set div height to the same as width for all elements with the same class

there's no need for Javascript here.

You can use a trick to set any container height to it's width:

.wrapper {position:relative;}
.wrapper:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 100%; /*trick here*/
}
.wrapper img {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
}

Any padding-top percentage value is relative to the parent container's width. 100% means it will be a square, 50% would give it half it's width.

It's a great trick when you're playing with image ratios ;)

I forked your jsfiddle with the extra code and added an outline so you could see the square container

https://jsfiddle.net/tLw354jm/2/

EDIT: Specification here https://www.w3.org/TR/CSS2/box.html#propdef-padding

Setting div height to equal width ( javascript )

This is super easy to do.

To edit set the style of an element with JS, you set the desired property of the style method.

var test = document.querySelector(".test");test.style.height = getComputedStyle(test).width;

.test {  background: red;}

<div class="test">Super uber goober</div>

JS - How can I set a div's width and height from an input value?

I'd probably agree with @epascarello's answer, but instead of returning false, i'd use preventDefault();

form.addEventListener("submit", function(e) { // Don't forget to pass the 'e' parameter
  var width = form.elements["width"].value,
    height = form.elements["height"].value;

  box.style.width = width + "px";
  box.style.height = height + "px";

  e.preventDefault();
});

Using preventDefault will prevent the default behavior of the event beeing passed, which is the form submit.

You can use it with links and other stuffs too.

User Adjustable Div Width

You can use css resize property: https://www.w3schools.com/cssref/css3_pr_resize.asp

Or you can use splitter: enter link description here
Or you can implement it with js yourself. In this case you will put divs on the borders of the div, catch the mouse click events and recalculate the sizes of your divs. I think it is better to use existing libs.

Get DIV width and height in javascript

Since you're already using jQuery, you can just do:

var width;

if (need == 1) {
   width = $("#web").width();
} else {
   width = $("#set").width();
}

Div height and width not being set in javascript

I think d.style.cssText overwrites width and height properties

Try this:

var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.cssText += 'border:1px solid black;'

---

Related Topics