I am currently doing some styling and have thought up an interesting way to do something. I want to create a piece of text that stands out among every other bit of text on the page. Below you can see the way I've done this.
var el = document.querySelectorAll('span[class^=impact]')[0],
col = el.className.split('-')[1];
el.style.textShadow = '2px 2px 0 #' + col;
html, body {
width: 100%;
height: 100%;
margin: 0;
background-image: url('http://i.imgur.com/UxB7TDq.jpg');
}
[class^=impact] {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: Impact, sans-serif;
font-size: 72pt;
font-weight: 800;
text-transform: uppercase;
}
<span class="impact-008080">impact</span>
As you can see I'm basically getting the first half of the class and applying styles to it and grabbing the second half of the class in JavaScript and applying the shadow then. What I want to do is omit the JavaScript completely and keep it all in CSS.
I do not have a list of colours. Any and all hex colours are supported obviously. I would prefer to keep this format.
CSS attr
Theoretically, this type of thing is what the CSS attr property could be used for when browser support exists. Note that this won't work now, but when browser support does exist, it might look something like this:
HTML
<span class="impact" data-shadow="#008080">Impact</span>
CSS
.impact {
/* you text and positioning styles here */
text-shadow: 2px 2px attr(data-shadow);
}
You can read more about the attr property here:
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
But for now...
Your best bet is probably to continue to use JavaScript, but instead of appending the hex code to the class name, store the hex value in a data attribute of the element, allowing you to keep the class name consistent for all instances of that element.
HTML
<span class="impact" data-shadow="#fff">Impact</span>
CSS
.impact {
/* your text and position styles here */
}
JS
var el = document.querySelector(".impact"),
shadow = el.dataset.shadow;
el.style.textShadow = '2px 2px ' + shadow;
Here's a JSFiddle for reference: http://jsfiddle.net/galengidman/xx6r1n2o/
Related
I have an DOM element and I want to only change the className of the element. I want to remain the css values as it. (For both external css and inline css)
For example, if I have this:
.sample{
display: block
font-size: 10px,
font-color: #fff
}
<div class="sample">...</div>
After doing some JavaScript operation I need to reach this:
.newCss{
display: block
font-size: 10px,
font-color: #fff
}
<div class="newCss">...</div>
Note: There is no strict rule for css, there can be a css selector with 100 values or with only 1 one.
Note2: There is no css selector such as .newCss, I should transform the css properties from .sample, to a new one called .newCss
You can get the computed style for the element prior to making the change:
const style = getComputedStyle(theElement);
and then apply that styling to the element directly:
theElement.style.cssText = style.cssText;
Then removing the class won't change the element's styling, because it's styled inline.
Example:
const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
const cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
theElement.style.cssText = cssText;
console.log("after: ", theElement.className);
}, 800);
.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}
.newCss {
background-color: yellow;
}
<div class="sample">this is the div</div>
If the new class has styling associated with it in CSS, that might affect the styling of the element. If you need to prevent that, change the class first, then assign the CSS text:
Example:
const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
theElement.style.cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
console.log("after: ", theElement.className);
}, 800);
.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}
<div class="sample">this is the div</div>
You have to use JavaScript. In order to use JavaScript, you have to assign a ID to the <div> tag. Then manipulate it by JavaScript. Example: document.getElementById("id1").className="sample";
Also make sure that you using semicolon(;) after CSS properties.
function f1()
{
document.getElementById("id1").className="sample";
}
.sample{
display: block;
font-size: 10px;
font-color: #fff;
color: red;
}
.newCss{
display: block;
font-size: 10px;
font-color: #fff;
color: green;
}
<div id='id1' class="newCss"><p>Hello</p></div>
<button onclick="f1()">Click</button>
Well, if you want to change className to a class which is identical, you can simply redefine the class in the style sheet to be equivalent, or you can use inline styles, but the purpose of CSS classes is to keep a unique set of rules, so two identically-ruled CSS classes would defeat the purpose for which they exist, to be unique definitions of CSS rules, so if you want the CSS rules exactly the same, then there wouldn't be a reason to change the className, unless you were referencing it with other JavaScript functions, or if you wanted to add additional styles while keeping the old ones, in such a case:
use classList to dynamically add or remove certain individual classes, while keeping others.
I would like to be able to update a CSS variable via JS, but when I make the variable update the CSS pseudo element get's destroyed (i.e. just disappears).
Here's the SCSS code:
:root {
--test-thing: "";
}
.folder-1-open span::after {
width: 90%;
height: 85%;
bottom: 0;
left: 5%;
background-color: #fff;
z-index: 3;
content: var(--test-thing);
}
I'm trying to manipulate the variable thusly:
const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")
The CSS above works perfectly fine on the element (a label) that it's applied to, basically just a white square, but as soon as I try and update the CSS variable --test-thing to add a string via the content prop, the whole thing just disappears.
Is it not possible to do this with a pseudo element or class?
From researching related posts on SO, my understanding was that this was possible using CSS variables.
For context, I’m working off this example of a pure CSS interactive folder (when it’s open is when I’d like to update content proper dynamically).
Ok, I figured out why this is happening, sort of. Still not 100% sure why, but it has something to do with the fact that the new value isn't in quotes. Just put the value in quotes and it works fine.
const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
--test: "";
}
#test {
height: 100px;
width: 100px;
background: #ccc;
}
#test:after {
content: var(--test);
min-width: 100px;
background: #000;
min-height: 30px;
color: #fff;
}
<div id="test">
</div>
This question already has answers here:
How to get computed background color style inherited from parent element
(3 answers)
Closed 4 years ago.
getComputedStyle is supposed to return the final computed CSS property value. But for background-color, all browsers return transparent (or rgba(x,x,x,0)) instead of computing in inherited value from ancestors.
The only time the method works is if the element has a background color specified directly (even if through its class, but not through parent's definifions). But that makes getComputedStyle useless, it should take in account all ancestor's definitions.
The method works fine for other things like color as shown in the fiddle.
How can i get the effective background color of an element in JS instead of every element telling me it is transparent?
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.textContent = 'Incorrect background-color: ' + compStyles.getPropertyValue('background-color') + ', but font color is correct: ' + compStyles.getPropertyValue('color');
/* no colors are specified for p */
p {
width: 400px;
margin: 0 auto;
padding: 20px;
line-height: 2;
font-size: 2rem;
font-family: sans-serif;
text-align: center;
}
/* this is the important part, only color gets inherited, not background-color */
div {
background-color: purple;
color: lightblue;
}
<!-- Original example taken from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle -->
<div>
<p>Hello</p>
</div>
If it helps, the X question is How do i compute color luminosity difference between font color and background for each element in a page in an userscript ;)
That getComputedStyle does not work makes it not doable imho. But this question should be interesting on its own.
It's because background-color property is not inherited by the children elements (unlike the color property).
You can read more at: https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
This is the correct result, because background color is not inherited. From MDN:
Initial value transparent
Applies to all elements. It also applies to ::first-letter and ::first-line.
Inherited no
Media visual
Computed value computed color
Animation type a color
Canonical order the unique non-ambiguous order defined by the formal grammar
To piggyback on other answers. Here's a working example using inherited css.
/* no colors are specified for p */
p {
width: 400px;
margin: 0 auto;
padding: 20px;
line-height: 2;
font-size: 2rem;
font-family: sans-serif;
text-align: center;
background-color: inherit; /* I added this */
}
/* this is the important part, only color gets inherited, not background-color */
div {
background-color: purple;
color: lightblue;
}
https://jsfiddle.net/meq6x5ay/
I am trying to create a div and show a timeout message in there. But it actually distorts other parts of Page. For eg see below. Session Timed out is the div with the message.
Now I don't want this to happen. PFB the JQuery code I am using to create this Div
function ShowSessionTimeOutDiv() {
var styler = document.createElement("div");
styler.setAttribute("style","font-size:15px;width:auto;height:auto;top:50%;left:40%;color:red;");
styler.innerHTML = "<b><i>Session TimedOut, Please refresh the Page</i></b>";
document.body.appendChild(styler);
var currentDiv = $('#GoToRequestControl1_UpdatePanel1').get(0);
currentDiv.parentNode.insertBefore(styler,currentDiv) ;
}
Am I missing something here? The Part in which this div is being displayed is coming from Master Page.
Have you tried the position:fixed styling on it in css, i did that on one of my websites and it didn't distort anything.
A page has a natural flow of its elements based on the default display rules specified by the W3C. When you add a div in between other elements it naturally affects the layout of the page; the positions of the other elements.
In order to drop in a new element without it affecting other elements you have to either reserve space for it, or take it out of the normal page flow.
There are a couple of ways to take an element out of the flow — you can float it, float:left or float:right, which is great, for example, to stack blocks on the left (instead of top-down) and let them wrap to new rows as available width changes. Using a flex layout gives you a lot of control also. But in this case of one thing popping up, changing the positioning of the new element is the most straightforward and can let you put the block exactly where you want it.
I have a demonstration and full explanation in a fiddle showing several examples along the way to getting what you want.
Basically, styling is needed to reposition the timeout message element that you're inserting. Styling is better done with CSS styles, compared to adding a bunch of inline styles. If I put my timeout popup message in a "messagebox" I can make a class for it.
/* Your styles, plus a couple extra to make the example stand out better */
div.messagebox {
font-size: 16px;
width: auto;
height: auto;
top: 40%;
left: 30%;
background-color: white;
border: 2px solid black;
}
Likewise, style the message itself with a class, instead of using inline styles and the deprecated presentational tags <b> and <i>.
/* I want the message in a messagebox to be bold-italic-red text. */
div.messagebox .message {
color: red;
font-style: italic;
font-weight: bold;
}
The big difference is that we will change the positioning of the element from the default static to instead use absolute positioning:
/* I don't really recommend a class called "positioned".
A class should describe the kind of thing the element *is*
not how it *looks*
*/
div.messagebox.positioned {
position: absolute;
width: 40%;
padding: 1.5em;
}
/* The container of the positioned element also has to be positioned.
We position it "relative" but don't move it from its natural position.
*/
section#hasposition {
position: relative;
}
The term "absolute" is tricky to learn ... the element being positioned is given an absolute position within its container, in a sense it's positioned relative to its container... but what position:relative means is relative to its own natural position, so it's easy to get confused at first over whether you want absolute or relative positioning.
Putting it all together, we have some basic HTML that represents major portions of a page — a real page will have far more, but those should be contained within some top-level containers. This shows only those top-level containers.
Then we have some javascript that will add the new element at the appropriate time. Here I just call the function to add it after a delay created with setTimeout(). I'm using full-on jQuery since you're using some in your example, and it makes the javascript more portable and more concise.
function ShowSessionTimeoutStyled() {
var styler = $('<div>').addClass('messagebox').addClass('positioned');
styler.html('<span class="message">The Session Timed Out</span>');
$('#hasposition .above').after(styler);
}
// wait 6 seconds then add the new div
setTimeout(ShowSessionTimeoutStyled, 6000);
div.messagebox {
font-size: 16px;
width: auto;
height: auto;
top: 20%;
left: 20%;
background-color: white;
border: 2px solid black;
}
div.messagebox .message {
color: red;
font-style: italic;
font-weight: bold;
}
div.messagebox.positioned {
position: absolute;
width: 40%;
padding: 1.5em;
}
section#hasposition {
position: relative;
}
/* also style some of the basic parts so you can see them better in the demonstration */
section.explanation {
margin: 1em 0.5em;
padding: 0.5em;
border: 1px solid gray;
}
.demonstration {
margin-left: 1em;
padding: 1em;
background-color: #e0e0e0;
}
.demonstration .above {
background-color: #fff0f0;
}
.demonstration .middle {
background-color: #f0fff0;
}
.demonstration .below {
background-color: #f0f0ff;
}
.demonstration footer {
background-color: white;
}
p {
margin-top: 0;
padding-top: 0;
}
section {
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="explanation">
<p>Here, a div is added dynamically, after the "basic part above", but the added div is <em>positioned</em>. You can see the other content isn't affected.</p>
<section class="demonstration" id="hasposition">
<div class="above">Basic part above</div>
<div class="middle">Middle part</div>
<div class="below">Part Below</div>
<footer>This is the page footer</footer>
</section>
</section>
I highly recommend the site Position Is Everything for articles and tutorials on positioning. Some of its other content is outdated — who needs to make PNGs to do drop-shadows any more? — but the way positioning works hasn't changed.
This is a two part question - first I need to get every element that is a child (or subchild, etc) of a parent element, and then I need to reset it's style. As such, I'm looking to do something like the following:
var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
everything[i].css = "font: 100%/100% Verdana,Arial,Helvetica,sans-serif; color: rgb(0, 0, o); margin: 0px; padding: 0px; border-collapse: collapse; border-width: 0px; border-spacing: 0px; text-align: left; outline: 0pt none; text-transform: none; vertical-align: middle; background-color: transparent; table-layout: auto; min-width: 0px; min-height: 0px;"
So my questions are as follows:
Is there a javascript function that will effectively walk through the DOM below a given element?
Is there a javascript function that will let me set a CSS string like that? Or do I have to have a whole bunch of entries like:
everything[i].style.font = ...;
everything[i].style.color = ...;
[...]
everything[i].style.min-height: ...;
jQuery is not an option.
Instead of a string, I would use an object, much more readable and maintainable:
var new_css = {
font: '100%/100% Verdana,Arial,Helvetica,sans-serif',
color: 'rgb(0, 0, o)',
margin: '0px',
padding: '0px',
borderCollapse: 'collapse'
/* rest here ... */
}
Then use a helper function, something like:
function setStyle (element, style) {
for (var n in style) {
element[n] = style[n];
}
}
and into your for loop:
for (i=0; i<everything.length; i++) setStyle(everything[i],new_css);
A note about the setStyle function (before people downvote me for this like last time), I purposely did not use a hasOwnProperty to check the elements of style because in this case, and in most cases we are using an object not inherited from anything. If you construct your new_css object any other way or if you use a library (prototype, I'm looking at you) that modify Object's prototype which may cause problems then feel free to add the hasOwnProperty check. Anyway, setting nonexistent style values are mostly harmless. And without a hasOwnProperty check you can use inheritence to compose style objects.
Use myElement.style.cssText:
var everything = parent.getEveryElementBelowThisOne();
for (i=0; i<everything.length; i++)
everything[i].style.cssText = "font: 100%/100% Verdana,Arial,Helvetica,sans-serif; color: rgb(0, 0, o); margin: 0px; padding: 0px; border-collapse: collapse; border-width: 0px; border-spacing: 0px; text-align: left; outline: 0pt none; text-transform: none; vertical-align: middle; background-color: transparent; table-layout: auto; min-width: 0px; min-height: 0px;"
But note that this will override any inline style attributes already applied. To append extra inline css you should use:
myElement.style.cssText += '; color:red; ...'; // note the initial ";"
Its slightly offbeat, as when you talk of parent, we assume you would be considering its children at some point. But when you say, every element below this one then they may be DOM elements after the concerned element. Yours may be either of the case.
I assume you want to change style of next element siblings.
Using raw javascript, you can traverse in a generic looping way, as
nS = parent.nextElementSibling
while(nS){
nS.style.width = '100%';
// Change the desired style here
// You can also further loop on nS's children using `nS.childNodes`,
// if you want to change their styles too
nS = nS.nextElementSibling;
}
As you can see with raw javascript, the way to change styles is quite repelling.
On the other hand, jQuery gives good DOM feature.. including easy traversing, even styling.
Like, the same thing in jQuery would be.
$(parent).nextAll().each(function(){
$(this).css({'width': '100%', 'other': 'rules', 'as': 'one-dict'});
// Change the desired style here
// You can also further loop nS's children using `$(this).children()`,
// if you want to change their styles too
});
Hope this helps.