How to get size of div based on class? - javascript

I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at

jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/

You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);

I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;

Related

how to get style values with js

so i have a simple html file which consists of a div; and a css file which has a simple styling for the mentioned div:
html :
<html>
<head>
<title>Simple Movement</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="index.js"></script>
</head>
<body>
<div id="square"></div>
</body>
</html>
css:
body {
margin: 0;
}
#square {
width: 100px;
height: 100px;
border: 1px solid #095057;
background-color: #20979e;
position: absolute;
left: 200px;
top: 200px;
}
in my js file i do a simple log as follows:
console.log(document.getElementById('square').style.top)
but i receive an error:
Uncaught TypeError: Cannot read properties of null (reading 'style')
at index.js:1
i have no idea why it says style is null.do you?
i have no idea why it says style is null.do you?
It doesnt.
It says document.getElementById('square') returns null so youre reading the property style on null which results in the error.
That happens because your script is loaded (and executed) in the head. At this point the element with the ID "square" isnt existent in the DOM yet.
Move your script to below your element (see snippet) or mark it with async defer like this: <script src="index.js" async defer></script> to make it load and execute after DOM parsing is done.
Also accessing style will only show inline styles from the style attribute so that wont get you values from your stylesheet file (or inline stylesheets).
Use computedStyleMap() (see https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap) to get the actual computed styles including all stylesheets.
body {
margin: 0;
}
#square {
width: 100px;
height: 100px;
border: 1px solid #095057;
background-color: #20979e;
position: absolute;
left: 200px;
top: 200px;
}
<html>
<head>
<title>Simple Movement</title>
<meta charset="UTF-8">
</head>
<body>
<div id="square"></div>
<script>
console.log(document.getElementById('square').computedStyleMap().get('top').value);
</script>
</body>
</html>

External javascript file not working in HTML file

I'm trying to change the property of a div from a javascript file but it's not working, it's working if I put it inside body but I want to work it from external js file for some project.
HTML file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Calendar</title>
<link rel="stylesheet" href="css/styles.css">
<script src="javascript/cal.js"></script>
</head>
<body>
<div id="container">
<div id="calendar-view">
</div>
<div id="events-view">
</div>
</div>
</body>
</html>
CSS file
*{
box-sizing: border-box;
}
#calendar-view{
float: left;
width: 70%;
background-color: blue;
height: 200px;
}
#events-view{
float: left;
width: 30%;
height: 200px;
background-color: red;
}
#container::after{
content: "";
clear: both;
display: table;
}
Javascript file
function startUp(){
document.getElementById("calendar-view").style.display = "none";
}
startUp();
I'm trying to change the property of a div from a javascript file but it's not working, it's working if I put it inside body but I want to work it from external js file for some project.
When you import your JS file at <header> your JS loads and then your body.
When you import your JS file after <body> your body loads and then your JS.
The first solution is to put your JS file after the second one is to put the function call inside the window onload event listener
you have to put the <script src="javascript/cal.js"></script> at the end of the </body> tag.
You cannot get element from the DOM before the browser get it through the HTML.

id.styles is showing nothing

I'm not sure if I'm going to completely crazy or if there's something wrong with my computer.
I have a simple piece of JavaScript below but when I console log the style object it is completely empty. This is despite the fact the the element in question clearly has styles attached to it.
<!doctype html>
<html>
<head>
<style>
#para{
width: 100px;
height: 100px;
position: absolute;
left: 200px;
top: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="para" class="paraDiv">This is the div</div>
<script>
window.onload = function(){
var d = document.getElementById('para');
console.dir(d);
console.log(d.style.top);
}
</script>
</body>
</html>
The style property only gets information about styles applied inline via an element's style attribute. It doesn't contain any information about styles inherited from other elements or declared in style sheets.
Instead, you want window.getComputedStyle, which will give you the information you're looking for.
console.log(getComputedStyle(para).top);

jQuery load() function changes the height of an input text

Ok, so I have this html file (sec1_2.html).
<body>
<div id="nameContainer">
<input id="sect1Name">
</div>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div#nameContainer {
background: none repeat scroll 0% 0% #000;
height: 50px;
padding: 0;
margin: 0;
}
input#sect1Name {
width: 330px;
margin: 0;
height: 50px;
padding: 0;
}
</style>
Is a simple div with an input in it.
As you can see, the height on the div and on the input are the same (50px).
So when you display this page you get the input inside the div at the exact same height.
But, now I have this other html (index.html):
<!DOCTYPE html>
<html>
<body>
<div id="section1">
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("#section1").load("sec1_2.html");
</script>
</body>
Now, here, I have an empty div where I load the external html (sec1_2.html).
When I do it like this, the (visible) height on the input increases!
I don't know why the input changes, if a let the input without height, both versions display the same height (default), but if I set a defined height, it will show a different height when loaded with jQuery.
Anyone knows why is this happening?
Hi for some reason your input is been rendered without one default property with the Jquery call, you can add this to your CSS:
input#sect1Name {
box-sizing:border-box;
}
This property is assigned for default in the html but not with Jquery.
http://plnkr.co/edit/6h8U9AQgFaNUb2plPbh6?p=preview

Flexible/responsive boxes weird browser behavior in jQuery

Safari: Works
Firefox: Weird floating issue on initial page load, works after browser resize
Chrome: End boxes jump around quickly when making window smaller
(have not tested other browsers)
Video displaying browser issues: http://tinypic.com/r/2gxo8w3/6
Full script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<style>
.box {
height: 250px;
background-color: #999;
float: left;
margin-right: 10px;
margin-top: 10px;
}
#boxes {
width: 100%;
overflow: auto;
}
.end-box {
margin-right: 0;
}
.top-box {
margin-top: 0;
}
</style>
<body>
<div id='boxes'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
columns = Math.floor($('#boxes').width()/225); //min box/column size (before spacing)
var spacing = ((columns - 1) * 10/$('#boxes').width())*100; //10px spacing between boxes
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');//removes margins
$('.box:nth-child(-n'+columns+')').addClass('top-box');
$(window).resize(function() {
columnsCheck = Math.floor($('#boxes').width()/225);
if(columns != columnsCheck) {
$('.end-box').removeClass('end-box');
$('.top-box').removeClass('top-box');
$('.box:nth-child('+columnsCheck+'n+0)').addClass('end-box');
}
columns = columnsCheck;
var spacing = ((columns - 1) * 10/$('#boxes').width())*100;
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');
$('.box:nth-child(-n'+columns+')').addClass('top-box');
});
</script>
</body>
</html>
How can I solve this issue (while maintaining 10px margins). I am also open to alternative methods of creating this effects via JavaScript/jQuery (trying to avoid pure CSS3).

Categories