This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
why dose not it work ? !!
i want to make images fade out when it is loaded , i know that this can be done by jQuery , but i wanna know where is the bug in this code.
<img src="http://1.bp.blogspot.com/-M03SoTLlJ4k/Vfwvq2dz42I/AAAAAAAAD9I/o-xN8x6HL2Y/s1600-r/Untitled-1%2B%25281%2529.png" onload="loadimage()" id="imageid"/>
<style>
#imageid {
opacity:0;
transition:1s;
}
</style>
<script>
function loadimage(){
document.getElementsByTagName("img").style.opacity="1"
}
</script>
getElementsByTagName returns a NodeList not a single DOM node, hence you need to do getElementsByTagName('img')[0] for example to get the first img, then apply the styles on that element.
Update
select all images
if you want to select all the images and apply styling to them
function loadimage(){
var imgElements = document.getElementsByTagName('img');
for(var i=0, l=imgElements.length; i < l; i++) {
imgElements[i].style.alpha = 1;
}
}
only currently loaded image (preferred by me)
function loadimage(){
this.style.alpha = 1;
}
In javascript,
document.getElementsByTagName('img')
returns a nodelist.
If you want the first item in that nodelist, you need to write:
document.getElementsByTagName('img')[0]
Related
This question already has answers here:
How to correctly iterate through getElementsByClassName
(10 answers)
Closed last month.
HTML (I'm writing in a combination of Markdown & HTML).
- Ex. **<a class="kanji">犬</a>が**好き ・ I like dogs.
- Ex. **<a class="kanji">私</a>は**オーケーです・**I am** okay
JavaScript
const kanjiAnchor = document.getElementsByClassName("kanji")
for (var i = 0; i < kanjiAnchor.length; i++) {
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor.textContent}`
kanjiAnchor[i].target = "_blank"
}
The above code returns an href of "https://jisho.org/search/undefined". I was able to do this on a smaller scale only selecting a single anchor with `document.getElementById("kanji"), but I want this to be done to every anchor tag with the class "kanji".
You need to access the textContent of the current element rather than the collection of elements.
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor[i].textContent}`
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
This is my first question ever, please show some love!
I'm trying to grab the background image from a div element and append it to a div every time I push a bottom. Below is the mockup code:
<div class="img"></div>
.img {
background: url("local image file");
}
function addImage(imageSrc) {
var imageSrc = document.getElementByClassName('img')[0].getComputedStyle.background
}
I could not find a way to grab the local path inside the background url(""). Can someone please help? I only know vanilla Javascript.
Thank you!
Using the getComputedStyle on the window.
const img = document.getElementsByClassName('img')[0];
const url = getComputedStyle(img).backgroundImage.slice(5, -2);
I get the URL from getComputedStyle(element).backgroundImage then slice out the url and brackets surrounding the link
Use:
window.getComputedStyle(document.getElementsByClassName('img')[0]).getPropertyValue('background')
getComputedStyle is a property of window. Since window is always implicit, it can be omitted. Here's your solution:
const imgSrc = getComputedStyle(document.querySelector('.img')).backgroundImage.slice(5, -2);
console.log(imgSrc);
.img{
background:url('test.png');
}
<div class='img'></div>
This question already has answers here:
How to apply CSS to iframe?
(28 answers)
How do you style a external svg with css
(1 answer)
Closed 3 years ago.
I am working on a custom Wordpress Theme run on my localhost server. I am having trouble figuring out why the class is being added to the classList, but the style elements are not applying.
Javascript: "custom.js"
$(document).load(function() {
changeColor();
});
function changeColor(){
var x = document.getElementById("icon").contentDocument;
var y = x.querySelectorAll("path, circle");
for(var i = 0; i < y.length; ++i) {
y[i].classList.add("icon_stroke");
}
}
External CSS Stylesheet: "style.css"
.icon_stroke {
stroke: red;
}
HTML/PHP: "front-page.php"
<object id="icon" data="<?php bloginfo('template_directory');?>/src/imgs/icons/balance_icon_light_circle.svg" type="image/svg+xml"></object>
I can see in the Chrome editor that it successfully adds the class to the classList of the SVG element, however, there is no styling change to the SVG. I assume this might have something to do with the external stylesheet interacting with an external SVG object. I have (a) attached screenshot(s) for further clarification. Please let me know if you understand what is causing this issue, or if you have a workaround solution.
Thanks!!!!
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 3 years ago.
When the user clicks on the like button I want to show a notification above "Mijn verhalen" to let the user know it liked a certain thing. I don't know what's wrong because there are no errors in my JavaScript. But the notification doesn't show up...
This is the JavaScript code:
var een =
document.getElementsByClassName('like');
var popup =
document.getElementsByClassName('toevoegen');
een.addEventListener('click', function() {
popup.classList.toggle('toevoegen');
});
img.toevoegen {
position: absolute;
right: 5em;
top: 4em;
width: 10em;
}
<button class="like"></button>
<img class="toevoegen" src="images/een.png">
var popup = document.getElementsByClassName('toevoegen');
document.getElementsByClassName returns HTMLCollection which is nothing but array. classList is not a known property of HTMLCollection.
You need to get the first element of this HTML collection and use the classList property. First element is nothing but the popup element.
Or else provide ID to the img tag and access it using document.getElementById which returns a DOM element not an HTML array collection.
var een =
document.getElementsByClassName('like');
// get the first pop up element here
var popup =
document.getElementsByClassName('toevoegen')[0];
een.addEventListener('click', function() {
popup.classList.toggle('toevoegen');
});
This question already has answers here:
Find all CSS rules that apply to an element
(10 answers)
Closed 8 years ago.
It's a little hard to explain what I want to do, So I'll try to do it with an example.
Lets say I have this HTML:
<ul>
<li id="myli" class="myclass">Hello</li>
</ul>
and the following css
.myclass{
color:red;
}
li.myclass{
background-color:black;
}
ul li{
float:left;
}
Now, I want to create a function in JS that get a DomElement and gets all the matching selectors from the css files for this element (like the F12 toolbar in chrome that shows all styles for an element) like the following:
var mySelectors = GetSelectorsForElement(document.getElementById("myli"));
and the content of mySelectors will be
[".myclass",
"li.myclass",
"ul li"]
Can this be achieved in JS?
With the way you described it, it looks like you'll already have the id, if you also wanted to get the classes, you could do something like this:
window.getMatchedCSSRules(document.getElementById("id"));
If you don't want to use the Webkit-native getMatchedCSSRules because of (lack of) browser support, you could simply try the following function:
function css(a) {
var sheets = document.styleSheets, o = [];
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (a.is(rules[r].selectorText)) {
o.push(rules[r].selectorText);
}
}
}
return o;
}
JSFiddle: http://jsfiddle.net/HP326/
Adapted from Can jQuery get all CSS styles associated with an element?
window.getMatchedCSSRules(document.getElementById("myli"));