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);
Related
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>
So I'm trying to use bPopup as a modal window, but I can't see to get the actual modal window to pop up. I followed the instructions on the documentation (see http://dinbror.dk/bpopup/), but I can't seem to get it appear. Am I missing something?
<html>
<script type = "text/javascript" src = "jquery-1.11.3.min.js"></script>
<script type = "text/javascript" src = "jquery.bpopup.min.js"></script>
<p> Some text </p>
<div style="display:none" id='popup'>
Why is there no modal body???
</div>
<script type = "text/javascript">
$(document).ready(
function(){
$('p').click(function(){
$('#popup').bPopup();
})
})
</script>
</html>
The resulting script looks like this:
After clicking, the result is this:
However, on the documentation, the modal is as follows:
I'm really not sure what I'm missing. I'm probably just blind to something really obvious, any ideas?
Have you read this?
What is bPopup? bPopup is a lightweight jQuery modal popup plugin
(only 1.49KB gzipped). It doesn't create or style your popup but
provides you with all the logic like centering, modal overlay, events
and more. It gives you a lot of opportunities to customize so it will
fit your needs.
So you need to write your own styles for the modal window.
Do not give inline style style="display:none". Inline style will have highest priority and hence bpopup does not/cannot change that property.
Style it in css instead like this
#popup {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
$(document).ready(function() {
$('p').click(function() {
$('#popup').bPopup();
});
});
#popup {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.bClose {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>
<p>Some text</p>
<div id='popup'>Why is there no modal body???
<span class="bClose">x</span>
</div>
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);
}) ;
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
I have code like this :
HTML:
<div id="myDiv" class="container">
....
</div>
CSS:
div.container {
width: 300px;
height: 400px;
border: solid 1px black;
overflow: hidden;
background: #efefef;
}
JS:
var myDiv = document.getElementById("myDiv");
var pageWidth = parseInt(myDiv.style.width);
I want to read css property and I can change value using js.
I have tried search with google, and my js code from link of google.
After I check the problem with safari's web inspector, there is problem in that I give sign for js code.
Why is that wrong?
var width = parseInt($('#myDiv').width(), 10);
You probably want to use css:
$("#myDiv").css("width","yourWidthhere");
To get the width of an element, just use:
$("#yourElementId").width();
try this
alert($('yourdiv').width());
live demo here
You may try this :
$("#myDiv").css("width","100%");
You can't get the class property using this code.
var myDiv = document.getElementById("myDiv"); var pageWidth =
parseInt(myDiv.style.width);
I am going with a jquery way, here is the sample code:
<html>
<head>
<style>
div.container { width: 300px; height: 400px; border: solid 1px black; overflow: hidden; background: #efefef;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
</head>
<body><div id="myDiv" class="container"> hi...</div></body>
</html>
Then you should able to get and set the width using the jquery methods:
$("#myDiv").width(); //Get
$("#myDiv").width(500); //Set