This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 3 years ago.
I'm using div with CSS value float: right;. I would like to change that by using JavaScript to change float attribute to left using on click function.
So I'm using click event listener:
document.getElementById("english").addEventListener("click", function isEnglish(){
document.getElementsByClassName('tab').style.cssFloat = "left";
});
but I fail to change float direction, the element stays in the same place. Codepen
How can I change float direction using JavaScript?
document.getElementsByClassName('tab') returns a list of elements to you may have to iterate over it.
The js property for float is float instead of ccsFloat you used in your code.
document.getElementById("english").addEventListener("click", function isEnglish(){
Array.from(document.getElementsByClassName('tab')).forEach(v => {
v.style.float = "left";
});
});
p {
width: 50px;
height: 50px;
float: right;
margin: 10px;
background: red
}
<p class="tab">a</p>
<p class="tab">b</p>
<p class="tab">c</p>
<p class="tab">d</p>
<p class="tab">e</p>
<button id="english">english</button>
Related
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>
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
This question already has answers here:
text-decoration: apparent discrepancy between appearance and computed values
(3 answers)
Closed 7 years ago.
In the following code example, I'd expect to see underline in the console log. Instead, I see none.
How do I extract the underline value from the text-decoration property in #one .yo?
setTimeout(function() {
var $el = document.querySelectorAll('#one .yo')[0];
var css = getComputedStyle($el).cssText;
console.log("text-decoration is set to:");
console.log(/text\-decoration\: ([^\;]+)/g.exec(css)?.[1] + '!');
console.dir($el);
console.log(window.getComputedStyle($el));
var $el2 = document.querySelectorAll('#two .yo')[0];
$el2.style.cssText = css;
}, 750);
* {
margin: 0;
padding: 0;
}
#one {
color: blue;
text-decoration: underline;
}
<div id="one">
<div class="yo">what's up</div>
</div>
<div id="two">
<div class="yo">what's up</div>
</div>
Although it affects its childs, the text-decoration style property [of the parent] is not inherited (bold is mine):
The text decorations are not technically inherited, but the effect is similar to inheritance. If they’re set on an inline element, they apply to all boxes generated by that element. (...)
It seems strange because other similar properties, like font-size, do inherit, but that's just the way it is (see "Inherited: no" at the table here and/or here).
This question already has answers here:
How to add a class to a given element?
(28 answers)
Closed 7 years ago.
The element i'm working with is a image i would like displayed during load time.
I am trying to set a css class attribute, i can set attributes on my image but its class attributes override's it.
So i need to set the class attribute. The class is .bgImage
This is how i set the attribute:
LoadingImg.setAttribute("display", "block");
This is what i have tried:
LoadingImg.className("display", "block");
And
LoadingImg.setAttribute(".bgImage display", "block");
CSS:
.bgImage {
position: fixed;
top: 0; left: 33%;
right: 0; bottom: 0;
z-index: 1;
display: none;
background-repeat:no-repeat;
}
Exstra info:
LoadingImg is the image object, i had to grab it through iFrame levels.
var HomeDoc = $('#ContentFrame').contents()[0];
var LoadingImg = HomeDoc.all.namedItem('LoadingImg');
Use the style property to set the style in javascript.
LoadingImg.style.display = "block";
If you want to use jQuery you can try:
$( "#LoadingImg" ).css( "display","block" );
You may use jQuery LoadingImg.addClass( ".bgImage" ).css("display", "block");
or
LoadingImg.attr("class", ".bgImage").css("display", "block");