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).
Related
This question already has answers here:
CSS flex box last space removed
(2 answers)
Closed 1 year ago.
I have created a demo, passing value with spaces around, defined two elements (p tag) in the HTML file, one with flex property and another without. An element with flex property showing the value without space in the HTML file and another one is simply displaying the actual value including space.
How to display actual value coming from JS file in the element with flex property?
UPDATE:
I want to understand why is the flex property removing the space from the value?
var value = " is ";
document.getElementById('value').innerHTML = value;
document.getElementById('value1').innerHTML = value;
.flex{
display: flex;
}
<p class="flex">
<span>This</span>
<span id='value'>value</span>
<span>hello</span>
</p>
<p>
<span>This</span>
<span id='value1'>value</span>
<span>hello</span>
</p>
For a more in-depth answer, please check out #Orial's post.
CSS flex box last space removed
The white-space processing model tells us:
If a space (U+0020) at the end of a line has white-space set to normal, nowrap, or pre-line, it is also removed.
To prevent this, use white-space: pre-wrap;:
.flex {
display: flex;
white-space: pre-wrap;
}
Demo:
var value = " is ";
document.getElementById('value').innerHTML = value;
document.getElementById('value1').innerHTML = value;
.flex{
display: flex;
white-space: pre-wrap;
}
<p class="flex">
<span>This</span>
<span id='value'>value</span>
<span>hello</span>
</p>
<p>
<span>This</span>
<span id='value1'>value</span>
<span>hello</span>
</p>
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>
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:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 3 years ago.
For context, this is a followup to an earlier question. Rather than digging through cssRules, I'd like to base the logic on jQuery selectors that search for the effects of those rules.
Given default properties of
.commentarea .author:before {
background-image: url(http://...);
background-position: -9999px -9999px;
/* ... */
}
that are selectively modified as in
.author[href$="gbacon"]:before /* ... */ {
content: "";
background-position: 0 -140px
}
how can I select pseudo-elements whose respective background positions have default values? Copying the selector as in
GM_log("size = " + $(".commentarea .author:before").size());
matches nothing. Trying .siblings() with
$(".commentarea .author")
.map(function(i) {
GM_log($(this)
.siblings()
.map(function (i) { return $(this).css("background-image") })
.get()
.join(", "))
});
produces only none values.
For full details, see the live page. Is this possible?
You can't use the :before and :after pseudo-elements like this. The purpose of them is to insert content before and after (respectively) the selector you have specified.
Example usage:
HTML:
<span class='a'>
Outer
<span class='b'>
Inner
</span>
</span>
CSS:
.a .b:before {
content: "|Inserted using :before|";
}
.a {
color: blue;
}
.b {
color: red;
}
Result:
http://jsfiddle.net/mzcp6/
What happened was that the text |Inserted using :before| was inserted before (well, really, prepended into) the inner span because it was class b and a descendant of an element of class a. Basically, :before and :after don't select; they modify.
Example:
This doesn't work as expected:
HTML:
<span class='a'>
<p>More text</p>
<span class='b'>
<p>More text</p>
Inner
</span>
</span>
CSS:
.a .b:before {
text-size: 100px;
}
Nothing happens:
http://jsfiddle.net/bQ2ty/
EDIT:
:before is not a valid jQuery selector: http://api.jquery.com/category/selectors/
I think you will need to use something other than :before or attempt to extract the original rule using the jQuery plugin: http://flesler.blogspot.com/2007/11/jqueryrule.html