How to target via Javascript where the original HTML will have additional .checkmark-disabled class like the desire output.
Original HTML 1
<div>
<input type="checkbox" disabled>
<span class="checkmark">
</div>
Original HTML 2
<div>
<input type="checkbox">
<span class="checkmark">
</div>
Desire Output
<div>
<input type="checkbox" disabled>
<span class="checkmark checkmark-disabled">
</div>
Means it's only target disabled input, then add .checkmark-disabled to span class.
Additional Info: I need to target sibling css not entire div.
Refer to W3School to look for what scenario you want to target. If you are referring to the sibling that right after the targeted element, then you can use the + sign in your css.
input + span Means selects all <span> elements that are placed immediately after <input> elements
To make it more advance, which based on the input status to change the sibling style, you can add:checked or :disabled in your input + span css.
input:disabled + span Means selects all <span> elements that are placed immediately after <input disabled> elements.
There are more way to do the CSS selector but better refer to the W3School.
If you want to use javascript or jquery to do the DOM, then you have to be more specific and provide the code you are using but failed to work.
You should consider applying styles to sibling element with CSS using :checked and :disabled pseudo-selectors and their compound:
input + .checkmark {}
input:checked + .checkmark {}
input:disabled + .checkmark {}
input:checked:disabled + .checkmark {}
Note that with such approach you will need to overwrite styles applied to the base selector (which is completely OK, but you may be confused). To apply different styles without overwriting you can use :not() pseudo-selector like this:
input:not(:checked) + .checkmark {}
For IE8 and less you can use such syntax:
input[disabled] + .checkmark {}
More information on pseudo-class selectors
Related
I am trying to remove the styling of the grandparent then parent element of my child's id.
For example ~>
<div>
<div>
<div id='screenSelector'>
</div>
</div>
</div>
However it returns an error in the console stating that Cannot read property 'parentElement' of null
How would I fix this issue?
Here is my current code ~>
thank you in advance for all of your help and time.
$(document).ready(function() {
document.getElementById("screenSelector").parentElement.parentElement.removeAttribute("style");
document.getElementById("screenSelector").parentElement.removeAttribute("style");
document.getElementById("runButtonWrapper").parentElement.parentElement.removeAttribute("style");
document.getElementById("runButtonWrapper").parentElement.removeAttribute("style");
$("body").append(themeChangesCss);
});
You are mixing native DOM selectors with the jQuery selector - the method to use in jQuery land is .parent() - I should also mention that it would be better to remove all inline styles anyway and rely on properly constructed CSS with correct styling and use of selectors.
Then the method to remove the attricture is .removeAttr() with the actual attribute listed.
For example- this code will work - in that it will remove the style attribute from the grandparent element of the selector- but there will be a flash of existing styling applied - before the jquery function works - remember the document.ready means that this will only be activated AFTER the loading of the DOM content - in this example a flash of red text before the style attribute is removed.
$(document).ready(function() {
// the following removes the color: red style attribute from the granparent element
$("#screenSelector").parent().parent().removeAttr('style')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="color: red;">
GrandParent
<div style="color: blue">
Parent
<div id='screenSelector' style="color: green">Child</div>
</div>
</div>
I need to add styling to a DIV element using JavaScript. I have the following DIV in my document:
<div class="RnEpo Yx5HN " role="presentation">
The script that I have tried is:
WebElement = document.querySelectorAll("div[class='RnEpo Yx5HN ']");
WebElement.style='height: 10000px;'
WebElement.setAttribute("height = 1000px;");
I want to achieve the same styling as this CSS:
.RnEpo Yx5HN
{
height: 100000px;
}
To achieve what you require, first replace querySelectorAll() with querySelector() seeing that your only need to select the first matching element.
Consider also revising your selector from div[class='RnEpo Yx5HN '] to a more robust selector in the form of div.RnEpo.Yx5HN which is to say:
Select div elements that have classes any ordering of class RnEpo and Yx5HN
Lastly, revise the way that you're applying the inline style so that the height attribute is directly specified on the WebElement style object.
These changes make the call to setAttribute() redundant. Note also that; setAttribute() takes two arguments, and the DIV element does not have a native height attribute.
Here's a working snippet showing this in action:
/* Use querySelector() to select first matching element and use dot notation syntax to select div with both classes */
const WebElement = document.querySelector("div.RnEpo.Yx5HN");
/* Apply inline style, avoid invalid setAttribute call */
WebElement.style.height = `10000px;'
<div class="RnEpo Yx5HN" role="presentation">
I know that is a bad practice to have more than HTML elements having same ID. However such is my situation where I need to specifically modify either of them.
I researched around and found about Jquery method 'document.getElementByID' that returns with the first similar element and lets you change it using css. Using that I wrote the code below but it doesn't work.
$(document.getElementById('it_trending-3')).css({"display":"none"});
I have added this code in my wordpress theme using the CSS-JS-PHP wordpress plugin, created a shortcut from the same and then added the shortcode. Can someone please guide me what and where I went wrong?
Also feel free to suggest a different function that would maybe let me specifically point to each of the same ID elements using maybe indexes. Thanks!
Keep a class to the divs you want to change:
<div>
<span id="a" class="test">1</span>
<span id="b" class="test">2</span>
<span>3</span>
</div>
The Jquery would go like this:
$(function() {
var w = $("div");
console.log($('#a').length);
console.log($('body #a').length);
console.log($('#a', w).length);
});
$(".test").first().css({"color":"orange"});
//or
$(".test:first").css({"color":"orange"});
But if you want to select any specific element with the class via an index of sorts, then you would need to do it like this:
var x = $(".test");
$(x[1]).css({"color":"orange"});
You can achieve this in 2 ways.
Based on element's hierarchy or based on class attribute / custom data attribute to the element.
In the below example we have 3 span elements with the same id and we have to apply 3 colors to each of those span elements.
HTML
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 1st div)
</span>
</div>
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 2nd div)
</span>
</div>
<br /><br /><br />
<span id="it_trending-3" class="testcls">
Applying css to same Id with class
</span>
Applying css using js / jquery based on element hierarchy
JQuery
(function($){
$("div:last #it_trending-3").css("color", "red");
$("div:first #it_trending-3").css("color", "green");
})(jQuery);
Based on class attribute / custom data attribute to the element.
JQuery
(function($){
$("#it_trending-3.testcls").css("color", "blue");
})(jQuery);
JS Fiddle Demo
Let's say i have the following code:
HTML
<div class="container">
<input class="myAwesomeInputBox">
</div>
CSS
.input [type=text]:focus > .//ANY CLASS SOMEWHERE ON THE WEBSITE{
//Some sweet CSS.
}
Obviously this code doesnt work. I want some specific css to get executed when there is focus on my inputbox. Is this at all possible?
I'm not specificly looking for html/css only solutions. Any solution that can achieve this is welcome.
My code above is just an extremely simple example. My question is really simple. Is it possible to change styling on ANY element on your website using the :focus on an input box.
Using pseudo-classes (such as :hover or :focus) to modify other elements can only be done if the other elements are siblings or children of the element which has the pseudo-class. That's because CSS child/sibling selectors are fairly restrictive.
You can use the > selector to select a direct child, and the + selector to select a direct sibling. For example, if you have the following HTML:
<form>
<input type="text" />
<input type="submit" />
</form>
<p class="arbitrary">
This is an arbitrary element. It is neither a child nor sibling of
the text field. It cannot be selected as a result of a pseudo-class
action on the textfield using CSS, but can be selected using
client-side scripting such as JavaScript.
</p>
You could style the button when the text field has focus (because it is a direct sibling of the text field), but there is no possible way to style the arbitrary paragraph as a result of the text field receiving focus (because it is neither a child nor sibling, it is the sibling of a parent) without using client-side scripting (JavaScript, jQuery, etc.).
This CSS would style the submit button, and can be altered to select any direct or indirect child or sibling:
input[type="text"]:focus + input[type="submit"] {
/* some sweet CSS */
background-color:green;
}
Using Javascript, of course, you have much greater flexibility. The focusin and focusout events can be used to toggle CSS classes. Here's an example that demonstrates both the CSS and JavaScript techniques of achieving this.
function setFocused() {
document.querySelectorAll('.arbitrary').forEach((result) => {
result.classList.add('focused');
});
}
function unsetFocused() {
document.querySelectorAll('.arbitrary').forEach((result) => {
result.classList.remove('focused');
});
}
document.querySelectorAll('input[type="text"]').forEach((result) => {
result.addEventListener("focusin", setFocused);
result.addEventListener("focusout", unsetFocused);
});
input[type="text"]:focus + input[type="submit"] {
/* some sweet CSS */
background-color: green;
}
.arbitrary.focused {
/* even more sweet CSS */
color: red;
}
<form>
<input type="text" />
<input type="submit" />
</form>
<p class="arbitrary">
This is an arbitrary element. It is neither a child nor sibling of
the text field. It cannot be selected as a result of a pseudo-class
action on the textfield using CSS, but can be selected using
client-side scripting such as JavaScript.
</p>
Here's the jQuery equivalent of the above code, if that's your jam.
$('input[type="text"]').on('focus', function() {
$('.arbitrary').addClass('focused');
});
$('input[type="text"]').off('focus', function() {
$('.arbitrary').removeClass('focused');
});
Note that if you decide you want to do something similar, except using a "hover" trigger rather than "focus", you can use the JavaScript mouseover and mouseout functions, or the jQuery .hover() function which takes two arguments (a handler for entering the hover and another for leaving the hover).
Maybe add a ID
<div class="container">
<input class="myAwesomeInputBox" id='myAwesomeId' type="text">
</div>
and add and remove a class like this.
Wont that solve your problem.
$('#myAwesomeId').on({
focus: function () {
$(this).addClass('focused');
},
blur: function () {
$(this).removeClass('focused');
}
});
CSS
input.focused {
border:3px solid blue;
}
FIDDLE
If the element css which you want to change is sibling, you can use like this,
<div class="container">
<input class="myAwesomeInputBox">
<div className="dls-sibling">
</div>
.myAwesomeInputBox:focus ~.dls-sibling {
&::before {
transform: scale(1);
border-color:red;
}
}
I'm on a site where I wanted to change my username color with javascript. I was able to change the background with getElementById but i cant seem to change the color of specific text without changing the whole page text color. Is there a way to use getElementById to change a specific text on the page?
Well, you could simply have each username enclosed within a <div> tag with an id of that user's id. And reference it that way with document.getElementById(). style.color
See this demo
<div> This div <span id="sp1">elements</span> have <span id="sp2">different</span> colours </div>
document.getElementById('sp1').style.color = 'green';
document.getElementById('sp2').style.color = 'red';
getElementById only gets the whole HTML element which contain the specific ID. So if you wish to style on the specific bunch of text inside that element, you can use inline elements for the specific text. For example:
<div id="text">
Some text with <span>your name</span> here.
</div>
Simply use CSS to style it rather than JavaScript:
div#text span {
color: blue;
}
This is possible only if you have the text wrapped by a node. Use span tag to contain the desire text. Include a class for the span like this <span class="username">user name here</span>. Then use in your CSS stylesheet :
span.username{
color : your.desired.color ;
}
I recommend you learn CSS if you are making a site. Is the best! If you don't want to use CSS you can just write <span style="color:red">user name here</span>. It will display the user name in red.
You can do something like this:
document.getElementById("id").style.color = "red";
DEMO: JSFiddle