Develop Reference

How do I get the width of an svg element which has a percentage using d3js?

I tried to stretch a chart to the dimension of a div-father but i actually can't take the dimension of the div-father and so I can't change the chart size.
I have this simple HTML
<div style="height: 300px; width: 500px">
<svg width="100%" height="100%"></svg>
</div>
and here's my js
var svg = d3.select("svg"),
margin = 100,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
but i read that attr("width") and attr("height") both return a string so the value should be "100%". What can i do to have the real dimension based on how the div change his size?

You should use:
svg.node().getBoundingClientRect() to get the actual width and height values.
To get the width and height specifically, for example, you would use:
var clientRect = svc.node().getBoundingClientRect()
var width = clientRect.width
var height = clientRect.height
See the answer to this question which is similar

How do I set the height of a css element based on the randomly generated height of another element?

I'm trying to create a consistent gap of 100px between two 'walls', one on the top of the screen 'wallTop' and one on the bottom 'wallBot', like in Flappy Bird. I've used Math.random on 'wallTop' to randomise the height of it in order to randomise the position of the gap, but how do I set the height of 'wallBot' to be based off of 'wallTop's randomised height?
Here's what I've tried
var wallGap = 100;
var wallTop = document.getElementById("wallTop");
var constant= (wallTop.height+wallGap);
$("#wallTop").css("height",Math.round(Math.random()*150+70)+"px");
$("#wallBot").css("height",450-constant+"px");
"450" is the height of the whole container, so I'm trying to find the remainder after subtracting 'wallTop' and 'wallGap', which will be the height of 'wallBot'.

Your constant won't change magically after having set a new height for wallTop (also note that wallTop.height will be undefined, since the element doesn't have the property height).
var wallGap = 100;
var wallSpace = 450 - wallGap;
var wallTop = $("#wallTop");
var wallBot = $("#wallBot");
wallTop.height(Math.round(Math.random()*150+70));
wallBot.height(wallSpace - wallTop.height());

Assign a style to a div with jquery

I would like to assign at a div named bannerdiv the max-width and the max-weightthat coincide with the browser resolution.
I have already captured the following data:
$(window).width()
$(window).height()
How can i assign these values at the style of bannerdiv?

You can use 'vw' which is viewport width and 'vh' which is viewport height, each number is representative of 1% of the viewport width(vw) or viewport height(vh) so '50vh' is 50% height of the browser window or '18vw' is 18% of the browser width.
https://www.w3schools.com/cssref/css_units.asp
And Mamun is correct you can apply this directly using jQuery's .css(), but using vw and vh you don't need to capture the window height and width.
So, if bannerdiv is a class
$('.bannerdiv').css({'max-height': '100vh', 'max-width': '100vw'});
if it is an ID
$('#bannerdiv').css({'max-height': '100vh', 'max-width': '100vw'});

To set style using jQuery use .css() like the following way:
var height = $(window).height();
var width = $(window).width();
$("#bannerdiv").css('height', height);
$("#bannerdiv").css('width', width);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bannerdiv">Test</div>
OR: In a single line
$("#bannerdiv").css('height', height).css('width', width);
OR: Even better with property initialiser
$("#bannerdiv").css({ 'width' : width, 'height' : height });

<div id="bannerdiv">YourDiv</div>
$('#YourDivID').css({
'max-width' : 'YourWidthForDiv',
'max-height' : 'YourHeightForDiv'
});
You can refer css() method Demo For More information

Welcome to StackOverflow.
You can use below snippet and in your code.
Store height and width in 2 variables:
var height = $(window).height();
var width = $(window).width();
Then assign value into container
$("#bannerdiv").attr('style','height:'+height+'px;width:'+width+'px');
"attr" event will append "style" attribute in the element.

how to get html content width not window's width

I want to retrieve the html content width. Suppose when we resize the window to smaller size then scrollbar comes, so I want to get the width of the entire html content content that is visible and also the content the that is not visible due to the vertical scrollbar.

You can use window.outerWidth and window.innerWidth.

You may try this:-
var width = document.getElementById('foo').offsetWidth;
Try this code:
window.moveTo(0,0);
window.resizeTo(screen.width,screen.height);
var navButtonsEtcHeight = screen.height - window.innerHeight;
var navButtonsEtcWidth = screen.width - window.innerWidth;

Here's a Fiddle
<div></div>
$(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').append('<h2>'+dWth+'px X '+dHgt+'px</h2>');
$(window).resize(function() {
var dWth = $(document).innerWidth(),
dHgt = $(document).innerHeight();
$('div').html('<h2>'+dWth+'px X '+dHgt+'px</h2>');
});
});
$(window).width(); // Returns width of browser viewport
$(document).width(); // Returns width of HTML document

You want the Element.clientWidth property. It gives the content width of the element.
Here's the documentation: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Height of div when totally expanded

I got a div which has a height limit. Now I would like to know how high the div would be if there was no height limit set.
How can I get that?
Daniel

If your are using Jquery then for example your div id is test then you can get the height $('#test').height();.

Try code
$(document).ready(function(){
alert($("div").height());
});
demo: http://jsfiddle.net/zCVMz/

The trick is to:
get the element .height()
set the CSS height to auto
store that height into a variable
reset to old height
$(function(){
var $test = $('#test'); // cache element
var orgH = $test.height(); // get LIMITED height
$test.css({height:"auto"}); // go to non-limited height
var couldBeH = $test.height(); // store that one
$test.css({height: orgH}); // reset org height
alert("Could be "+ couldBeH);
});

Using javascript:
var $div = $('div');
var height = $div.height();
$div.css('height','auto');
var newHeight = $div.height();
$div.css('height',height);
alert('original height:' + height) ;
alert('new height:' + newHeight) ;
SEE FIDDLE

var mydivheight = document.getElementById('myDiv').clientHeight;
var mydivheight = document.getElementById('myDiv').offsetHeight;
var mydivheight = document.getElementById('myDiv').scrollHeight;
clientHeight- Includes the height and vertical padding.
offsetHeight- Includes the height, vertical padding, and vertical borders.
scrollHeight- Includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.