This question already has answers here:
Check if an element contains a class in JavaScript?
(30 answers)
Closed 4 months ago.
I have a small code where i want to
check which class is on the element curently.
change the curent class to the other class
html :
<div class="text-area-box" id="text-area-box">
<input type="text" name="" required="">
<label>Titre</label>
</div>
css:
.text-area-box-active{
position: relative;
}
.text-area-box {
position: relative;
display: none;
}
js (not correct) just a way to show what i want to do :
if(curentClass = text_area_box)
{
element.classList.remove('text-area-box');
element.classList.add('text-area-box-active');
}
else{
element.classList.remove('text-area-box-active');
element.classList.add('text-area-box');
}
how can i make the correct javascript.
You can do this by getting element using JavaScript and then by using classList.contains() you can check whether this element contains a particular class or not.
//JavaScript to handle logic
function updateClass(){
//get element to get, compare and update class
var element = document.getElementById("text-area-box");
//classListApi to chek if this element has class
if(element.classList.contains('text-area-box'))
{
element.classList.remove('text-area-box');
element.classList.add('text-area-box-active');
}
else{
element.classList.remove('text-area-box-active');
element.classList.add('text-area-box');
}
}
//Call this functions according to your condition
updateClass()
//adding colors for testing
.text-area-box{
background-color:red !important;
}
.text-area-box-active{
background-color:yellow !important;
}
<div class="text-area-box" id="text-area-box">
<input type="text" name="" required="">
<label>Titre</label>
</div>
Related
This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 1 year ago.
how to hide class with javascript . I get a value if status = 1 then the class show, and if status = 2 then the class is hidden.
<div class="entry-img" id="status">
<img id="txt_img_content_1" alt="" class="img-fluid">
</div>
var divElement = document.getElementById("status");
if(status==2){
divElement.classList.remove("entry-img");
}
if(status==1){
divElement.classList.add("entry-img");
}
You can do it with the code something like this.
var element = document.getElementById("status");
if(status==2){
element.classList.remove("entry-img");
}
if(status==1){
element.classList.add("entry-img");
}
For more information you can refer to this links https://www.w3schools.com/howto/howto_js_remove_class.asp
https://www.w3schools.com/howto/howto_js_add_class.asp
https://www.w3schools.com/js/js_if_else.asp
I thing, that toggle might be to use in your case:
function setStatus(status) {
document.querySelector("#status").classList.toggle("entry-img", status == 1);
}
div {
width: 30px;
height: 30px;
background: #f00;
border-radius: 100%;
}
.entry-img {
background: #0f0;
}
<div id="status"></div>
<button onclick="setStatus(1)">1</button>
<button onclick="setStatus(2)">2</button>
This question already has answers here:
How do I target elements with an attribute that has any value in CSS?
(3 answers)
Closed 2 years ago.
I need to get a display none the above span by attribute "data-email".
<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button"> </span>
The [attribute] selector is used to select elements with a specified attribute.
in your css you can do that:
span[data-mail] {
display: none;
}
or
span[data-mail="qwerty"] {
display: none;
}
span[data-email]{
color: red
}
span[data-email="test"]{
color: blue
}
<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button">hello </span>
<span data-email="test">world</span>
Just select element by attribute and apply CSS.
$('span[data-email="qwerty"]').css({
display: "none"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span contenteditable="false" id="signature1596021675154" tabindex="1" data-role="test" data-email="qwerty" title="qwerty" data-name="name" style="z-index: 600; margin-right: 0px; visibility: visible;" class="index signature-container editor-elements valid_button">Some text</span>
Because its HTML data attribute you can do the following in javascript
email_condition = "qwerty"; //you can set whatever condition you need
console.log(document.querySelector(`span[data-email="${email_condition}"]`));
document
.querySelector(`span[data-email="${email_condition}"]`)
.classList.add("display_none");
display_none is a class defined in css whose definition looks like
.display_none {
display: none;
}
You can refer my [codepen link]:https://codepen.io/ankitt8/pen/pogXJJV
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
As mentioned in the comment if you want to make the code work for multiple span tags with same email condition you can do as below
email_condition = "qwerty";
let allSpanEmailTag = document.querySelectorAll(
`span[data-email="${email_condition}"]`
);
// note its querySelectorAll previously it was querySelector only
// querySelectorAll returns a list of node based on specified condition.
for (let i = 0; i < allSpanEmailTag.length; ++i) {
allSpanEmailTag[i].classList.add("display_none");
}
The codepen link has been updated so you can refer that!
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I want to make rating. I have no idea how to make previous elements get style of checked element.
CSS
.give-rate label i {
color: lightgray;
cursor: pointer;
}
.give-rate .selected i {
color: gold;
}
HTML
{% for radio in rating.Rate %}
{{form_widget(radio)}}
<label for="{{radio.vars.id}}" id="star-{{radio.vars.value}}" class="required">
<i class="fas fa-star" id="{{radio.vars.value}}" onclick="pick({{radio.vars.value}})"></i>
</label>
{% endfor %}
JS
function pick(id) {
const star = document.getElementById("star-" + id);
const stars = document.getElementsByClassName("selected");
while (stars.length > 0) {
stars[0].classList.remove("selected");
}
star.classList.add("selected");
}
This is working (picking one selected star from five and changes it color to gold) but I want stars that are behind selected one change color also.
I've tried changing css to:
.give-rate .selected::before i,
.give-rate .selected i {
color: gold;
}
but this way none star was changing color.
Is there anyone who can tell what should I do?
There is no such thing as a selector that would apply on an element, and all of the previous siblings.
You should use JavaScript to apply the selected class to the hovered star, and also the previous ones.
This question already has answers here:
CSS scoped custom property ignored when used to calculate variable in outer scope
(2 answers)
Closed 4 years ago.
I have a full working CodePen here showing the problem. I'm using CSS custom properties like so:
:root {
--global-primary-colour-hue: 211;
--global-primary-colour-saturation: 100%;
--global-primary-colour-lightness: 50%;
--global-primary-colour-opacity: 1;
--global-primary-colour: hsla(
var(--global-primary-colour-hue),
var(--global-primary-colour-saturation),
var(--global-primary-colour-lightness),
var(--global-primary-colour-opacity));
}
.box {
background-color: var(--global-primary-colour);
height: 100px;
width: 100px;
}
Then I've set up a range slider and box to display the colour in my HTML:
<input id="hue-range" value="0" type="range" min="0" max="360">
<div class="box"></div>
Finally I want to use the range slider to drive the --global-primary-colour-hue property. I can get this to work like so:
var element = document.getElementById("hue-range");
element.onchange = function(){
document.body.style.setProperty(
"--global-primary-colour-hue",
this.value.toString());
// Why does the box stop changing colour when I comment out this line?
document.body.style.setProperty(
"--global-primary-colour",
"hsla(var(--global-primary-colour-hue),var(--global-primary-colour-saturation),var(--global-primary-colour-lightness),var(--global-primary-colour-opacity))");
}
My question is, why do I have to set the --global-primary-colour property? When I uncomment that last line, the colour in the box no longer changes.
In your script, you're setting the custom properties on the body element. However, in your stylesheet, your custom properties are all (as usual) specified for :root, the html element. So the value of --global-primary-colour-hue is unchanged for :root, and the value of --global-primary-colour in turn remains unchanged. This unchanged value then gets inherited by body and .box — the new value of --global-primary-colour-hue ends up never getting used.
Setting the property for document.documentElement in your script, or changing the CSS rule to target body instead, allows your code to work correctly without needing that last line:
var element = document.getElementById("hue-range");
element.onchange = function(){
document.documentElement.style.setProperty(
"--global-primary-colour-hue",
this.value);
}
:root {
--global-primary-colour-hue: 211;
--global-primary-colour-saturation: 100%;
--global-primary-colour-lightness: 50%;
--global-primary-colour-opacity: 1;
--global-primary-colour: hsla(
var(--global-primary-colour-hue),
var(--global-primary-colour-saturation),
var(--global-primary-colour-lightness),
var(--global-primary-colour-opacity));
}
.box {
background-color: var(--global-primary-colour);
height: 100px;
width: 100px;
}
<input id="hue-range" value="0" type="range" min="0" max="360">
<div class="box"></div>
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 5 years ago.
I am trying to use removeAttribute() to remove one specific class attribute from an element. The problem is that removeAttribute() seems to remove all of the other defined class attributes on the element.
Example:
HTML
<span id="click">Click</span>
<div id="box" class="blue dotted width-50"></div>
CSS
.blue {
background-color: blue;
}
.dotted {
border: thin dotted grey;
}
.width-50 {
width: 50px;
height: 50px;
}
JS
var el = document.getElementById('click');
el.addEventListener("click", removeColor, false);
function removeColor() {
var box = document.getElementById('box');
box.removeAttribute('class', 'blue');
}
How can I just remove the one class attribute from the element, without affecting the other class attributes on the element?
http://jsbin.com/xoxodezeze/edit?html,css,js,output
You need to use
function removeColor() {
var box = document.getElementById('box');
box.classList.remove('blue');
}
The problem is that removeAttribute() removes the complete attribute name class
SO <div id="box" class="blue dotted width-50"></div>
becomse like <div id="box" ></div>.
You just want to remove the class here is doc
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList