This question already has answers here:
How to get element's attribute set in CSS class
(6 answers)
Closed 9 years ago.
I checked it in two newest browsers.
JS code:
window.onload = function () {
alert
(document.getElementById("slideshow").getElementsByTagName ("img") [0].style.width);
}
HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<img src="slides/1.gif">
<img src="slides/2.gif">
<img src="slides/3.gif">
</div>
</body>
</html>
CSS code:
#slideshow img {
display : none;
width : 300px;
height : 200px;
}
But I have empty string from alert. Why the error (no errors in Firebug) occurs? Can I read style added from css file at all ? http://jsfiddle.net/HM47Q/
Use getComputedStyle instead.
window.onload = function () {
var elem = document.getElementById("slideshow").getElementsByTagName("img")[0];
console.log(window.getComputedStyle(elem, null).getPropertyValue("width"));
}
jsFiddle example
Empty images doesn't have width/height
Because you are retrieving inline style.
use this:
var element = document.getElementbyId("#slideshow").getElementsByTagName('img')[0];
var style = window.getComputedStyle(element),
var width = style.getPropertyValue('width');
JSFiddle: http://jsfiddle.net/enzoferber/HM47Q/2/
var firstImg = document.getElementById("slideshow").getElementsByTagName ("img") [0];
alert ( window.getComputedStyle(firstImg).width );
You have to use getComputedStyle in order to do it.
This is working::
Make your image display:block,otherwise it will return 0.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
#slideshow img {
display : block;
border:1px solid;
width : 300px;
height : 200px;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="slides/1.gif">
<img src="slides/2.gif">
<img src="slides/3.gif">
</div>
<script>
window.onload = function () {
alert(document.getElementsByTagName('img')[0].clientWidth);
}
</script>
</body>
</html>
Related
this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body onload="load();">
<img src="img1.png">
<img src="img2.png">
<img class="img3" src="img3.png">
</body>
</html>
And I want the 3rd image to go to the left when mouse is over it. (It has position: absolute; on it) using this js code
let img;
function load(){
img = document.querySelector(".img3");
img.addEventListener("mouseover", mouseover);
}
function mouseover(){
img.style.left = "0px";
}
but mouseover never gets called. (Checked with logging)
you can use the hover method in css to achieve this, it would look something like:
.img3:hover {
width: *put desired width here*;
height: *put desired height here*;
}
You might need to use id tags to make the default image shrink when the img3:hover event occurs. You can find more information about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
In your css you can use
.img3:hover{
/* css here */
}
If you use this method you do not need to use Javascript to change css on hover it is built in to css already :)
here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764
I am trying to modify the height of a div element in a Javascript function. The height is initially
set to 50px in the style section. Neither of the attempts shown below have any effect. I would appreciate your help on this. Thanks.
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
window.onload = function () {
setHeight();
}
function setHeight() {
var testElement = document.getElementById("test");
testElement.style.offsetHeight = 200;
testElement.offsetHeight = 200;
}
</script>
</head>
<body>
<div id="test" style="height:50px;border-style:solid;border-width:thin;">
<p>Some text</p>
</div>
</body>
</html>
Just set style.height
testElement.style.height = '200px';
Trying to change color using a variable, console works but color not changing when I click on the square.
Color is the variable I want to use.
I have tried an actual string value and that does not work.
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">
</div>
<script>
function myFunction() {
var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
document.getElementById("shapes").style.backgroundColour = colour;
console.log(colour);
}
</script>
</body>
</html>
its backgroundColor not Colour .. you have an extra u
You need to replace backgroundColour by backgroundColor without u :
document.getElementById("shapes").style.backgroundColour = colour;
______________________________________________________^
Must be :
document.getElementById("shapes").style.backgroundColor = colour;
NOTE 1: You need to trigger the function to see the effect and you must also give your target div shapes a width/height so you can see it.
NOTE 2: You must listen on DOMContentLoaded event to make sure all the elements are loaded to the DOM before calling your script.
Working sample:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<style>
#shapes {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var shapes = document.getElementById("shapes");
shapes.addEventListener('click', myFunction, false);
});
function myFunction() {
shapes.style.backgroundColor = "#" + (Math.random() * (1 << 24) | 0).toString(16).slice(-6);
}
</script>
</body>
</html>
Try this
const shapes = document.getElementById("shapes"); // You declare once, then you can reuse
function myFunction() {
var colour = '#'+((Math.random() *(1<<24)|0).toString(16).slice(-6));
shapes.style.backgroundColor = colour;
console.log(colour);
}
shapes.addEventListener('click', myFunction); // I guess you want to click somewhere
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">Shapes</div>
Below code gives the expected result. please take it.
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
<style>
#shapes {
width: 300px;
height: 300px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes" onClick="myFunction();">
test
</div>
<script>
function myFunction() {
var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
document.getElementById("shapes").style.backgroundColor = colour;
console.log(colour);
}
</script>
</body>
</html>
the goal here is onclick of 1.gif, everything with .panel1 class disappears(style.display.none), and everything with a .panel2 class becomes visable (style.display.inline)
I'm new at this..so I think its just a syntax issue with ' ' or maybe " "
<!DOCTYPE html>
<html>
<head>
<title>main</title>
<meta charset="utf-8">
<style type="text/css">
.panel1 {display:inline;}
.panel2 {display:none;}
</style>
<script type="text/javascript">
function panelTransition(panelOut,panelIn)
{
document.getElementByClass(panelIn).style.display="inline";
document.getElementByClass(panelOut).style.display="none";
}
</script>
</head>
<body>
<img class="panel1" src=1.gif onclick="panelTransition(panel1,panel2)" />
<img class="panel2" src=2.gif />
</body>
</html>
There is no getElementByClass. It's getElementsByClassName, and it returns an array of items, so you'll need to modify your code to loop through them.
function panelTransition(panelOut, panelIn) {
var inPanels = document.getElementsByClassName(panelIn);
for (var i = 0; i < inPanels.length; i++) {
inPanels[i].style.display = 'inline';
}
var outPanels = document.getElementsByClassName(panelOut);
for (var i = 0; i < outPanels.length; i++) {
outPanels[i].style.display = 'none';
}
}
If you were using a JavaScript library, like jQuery, this would be much easier to do. Also, as has been mentioned, you need quotes around your arguments to panelTransition.
<img class="panel1" src=1.gif onclick="panelTransition('panel1', 'panel2')" />
<img class="panel2" src=2.gif />
<img class="panel1" src=1.gif onclick="panelTransition('panel1','panel2')" />
I think you need quotes there
<html>
<head>
<title>main</title>
<meta charset="utf-8">
<style type="text/css">
.panel1 {display:inline;}
.panel2 {display:none;}
</style>
<script type="text/javascript">
function panelTransition(panelOut,panelIn)
{
// panelIn gets turned on
setDisplay(panelIn,"inline");
// panelOut gets turned off
setDisplay(panelOut,"none");
}
function setDisplay(className,displayState)
{
// retrieve a list of all the matching elements
var list = document.getElementsByClassName(className);
// step through the list
for(i=0; i<list.length; i++) {
// for each element, set the display property
list[i].style.display = displayState;
}
}
</script>
</head>
<body>
<img class="panel1" src="1.gif" onclick="panelTransition('panel1','panel2')" />
<img class="panel2" src="2.gif" onclick="panelTransition('panel2','panel1')" />
</body>
</html>
Or you can accomplish the same in jQuery
// fires when the page is up and running
$(document).ready(function(){
// find all the panel1 elements,
// attach an on click handler
$(".panel1").bind("click", function(){
// find all the panel1 elements
// set their css display property to inline
$(".panel1").css("display","inline");
// find all the panel2 elements
// set their css display property to none
$(".panel2").css("display","none");
});
$(".panel2").bind("click", function(){
$(".panel2").css("display","inline");
$(".panel1").css("display","none");
});
});
You can learn all about jQuery here : http://www.jquery.com/
You'll only be able to get your code to run once, as soon as you click a panel1 image all of the panel2 images will disappear, you won't be able to click them back on ever again.