This question already has answers here:
Getting the parent div of element
(7 answers)
Add CSS attributes to element with JavaScript
(5 answers)
Set CSS property in JavaScript?
(11 answers)
Closed 3 months ago.
I'm trying to translate this jQuery into JavaScript, to save a bit on load time. Here's the line of jQuery:
$('div.annotated p > span.citation').parent().css('display', 'inline')
And here's what I have so far in JavaScript:
document.querySelectorAll('div.annotated p > span.citation').forEach((el) => {})
I'm stuck on how to find the parent of an element, and also apparently how to set the CSS for that element. Should I stick with jQuery, or can JavaScript also do this, and is it much harder?
Related
This question already has answers here:
Create <div> and append <div> dynamically
(9 answers)
Closed 2 years ago.
I used a query selector to get the div i want to append. But the created div doesn't want to append to anything other than the body. Is there a way i can make it specifically append under the div?
Look at this: https://www.w3schools.com/jsref/met_node_appendchild.asp
What you need to do is
parent.appendChild(thatDiv);
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 5 years ago.
I made this function to "split" my elements and give them background-colors:
var colors = ['red','yellow','green','blue'];
function splitColors($item) {
$item.each(function(i) {
$(this).addClass(colors[i % 4]);
});
}
splitColors($('.comment:before'));
now I want to apply this function on a before element in my DOM, but it doesn't work.
Can I access the ::before element in jQuery?
I can't use a real element, cause the WordPress comment section don't allow own markup..
Thanks!
I think this works:
splitColors($('.comment').before());
This question already has answers here:
Access the css ":after" selector with jQuery [duplicate]
(3 answers)
Closed 8 years ago.
I can get css of an element in an iframe by this way:
var bg_color = $('iframe.#myIframe').contents().find('div#someId').css('background-color');
but I can't get:
var bg_color = $('iframe.#myIframe').contents().find('div#someId:hover').css('background-color');
So, how can I get css of a hover element in an iframe (same domain)? Please help me! Thanks!
This cannot be done, the iFrame is literally a window to another webpage, therefor it is not in your DOM, and not accessible by your jquery
This question already has answers here:
Remove all child elements of a DOM node in JavaScript
(37 answers)
Closed 9 years ago.
I found some jQuery code to clear the contents of a div:
$('#masterdiv').empty();
Is there any similar way to do this in raw javascript, without jQuery or any other library?
This code will work.
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
Mention the id of the tag on myNode for which you want to remove the inner child.
Please have a look on
http://jsfiddle.net/2dJAN/19/
<div class="btn-post">123</div>
$(".btn-post").html("")
This question already has answers here:
How to get the entire document HTML as a string?
(16 answers)
Closed 5 years ago.
I know there's a way to do this, but I cannot recall how.
How do I go about grabbing the HTML element (top-most element in the DOM), using plain JavaScript?
Use document.documentElement.
See the docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement
var html = document.getElementsByTagName('html')[0];