Develop Reference

SVG Object classList.add() is adding the class to the element but not linking back to the stylesheet [duplicate]

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!!!!

style the thumb of range input with jquery [duplicate]

This question already has answers here:
change background image of webkit-slider-thumb by jquery
(4 answers)
Closed 7 years ago.
I have some sliders which I want to style via jquery
For example:
<input type="range"/>
To style it with plain css I would write:
input[type="range"]::-webkit-slider-thumb{
/* blah blah blah*/
background:red;
}
This is working.
However if I try this:
$("input[type='range']::-webkit-slider-thumb").css("background","red");
It will not give me an error but it also will not work.
I have seen some other similar questions .The answer to these questions were to insert a new style tag with jquery and some classes(Something i don't want to do).Is there any way to style ::-webkit-slider-thumb with jquery?
UPDATE
I don't want to inject any new style tags to my html or use custom classes!!!

Plain JavaScript could work for this:
for(var j = 0; j < document.styleSheets[1].rules.length; j++) {
var rule = document.styleSheets[1].rules[j];
if(rule.cssText.match("webkit-slider-thumb")) {
rule.style.backgroundColor="red";
}
}
Here is an Example
Because ::-webkit-slider-thumb is pseudo-element jQuery cannot select it, which leaves you with limited options to style this.
You could optionally use jQuery:
$("input[type='range']").addClass('slideThumb');
and then using CSS add:
.slideThumb::-webkit-slider-thumb {
background: red;
}
but this would be equivalent of simply adding the class directly onto your input:
<input class="slideThumb" type="range"/>

CSS
.redslider::-webkit-slider-thumb {
background-color: red;
}
jQuery
$('input[type=range]').addClass('redslider');
Why?
::-webkit-slider-thumb isn't actually a selector. It's like setting an :active through a style attribute which isn't possible. That makes it so we have to make it in a class and add it. You could use document.styleSheets but that is ambiguous, complicated, and is overkill for a simple task such as this

How to select input::placeholder using JS? [duplicate]

This question already has answers here:
Changing CSS pseudo-element styles via JavaScript [duplicate]
(8 answers)
Closed 5 years ago.
I have this CSS: input::placeholder {font-size: 30px}
and I trying to change input placeholder CSS in JS
var inputPlaceholder = document.querySelector("input::placeholder");
inputPlaceholder.style.fontSize = "5px";
but console returns Uncaught TypeError: Cannot read property 'style' of null.
How to to change input placeholder CSS in the right way?

Try For This:
<input type="text" style="font-size: 30px" placeholder="Here." id="new"/>
var inputPlaceholder = document.getElementById('new');
inputPlaceholder.style.fontSize = "5px";

JavaScript Only - Remove Certain classes if present [duplicate]

This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 7 years ago.
I have the following classes (below), they are added dynamically on the HTML (below).
I have classes already present, what Javascript recommended code should be used to remove one or all of these classes if they are already present on the html below. The function I am building, will reset the element, I NEED the current classes to be present, but the colour classes need to be removed if one / multiple values are present.
HTML
<div id="overlay__inner" class="overlay__inner overlayActive clearfix"></div>
Classes
<ul>
<li>is--blue</li>
<li>is--red</li>
<li>is--yellow</li>
<li>is--purple</li>
<li>is--green</li>
<li>is--pink</li>
<li>is--orange</li>
</ul>
UPDATE:
So in a nutshell, I want to do this jQuery example in javascript:
$('#overlay__inner').removeClass('is--blue is--red is--yellow is--purple is--green is--pink is--orange');
This is what I have so far:
document.getElementById('overlay__inner').classList.remove('is--blue').classList.remove('is--red').classList.remove('is--yellow').classList.remove('is--purple').classList.remove('is--green').classList.remove('is--pink').classList.remove('is--orange');
But I get this error:
Uncaught TypeError: Cannot read property 'classList' of undefined

Removing a single class is rather straightforward, what are you having trouble with specifically?
var els = document.querySelectorAll('.is--blue');
Array.prototype.forEach.call(els, function(el) {
el.classList.remove('is--blue');
});
.is--blue {
color: blue;
}
<p class="is--blue something-else">Sample</p>
<p class="is--blue">Sample</p>

jQuery differences in append(string/ref_jquery_obj/jquery_obj) [duplicate]

This question already has answers here:
jQuery Append String vs Object Containing String
(2 answers)
Closed 9 years ago.
These are all ways to append a div to the body of the HTML. But what are the differences and when should I use which (performance-wise).
var div = '<div id="divid"></div>';
$('body').append(div);
and
var div = $('<div id="divid"></div>');
$('body').append(div);
and
$div = $('<div id="divid"></div>');
$('body').append($div);

var div = '<div id="divid"></div>';
$('body').append(div);
The above code will work fine when you just want to append html string to the DOM
The below code will work fine when you just want to append jQuery Object to the DOM and you can manipulate it with jQuery
var div = $('<div id="divid"></div>');
div.css({//your css code});//this is not possible in above example
$('body').append(div);