I want to change a less variable on client side.
Say I have a less file
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
I want that user yo pick a color and change the value of #color1 and recompile css without reloading the page.
Basically I'm looking for a js function, something like this
less_again({color1: '#ff0000'})
Marvin,
I wrote a function that does exactly what you're looking for, last night.
I have created a fork on Github;
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.
Here is a basic sample;
Sample LESS:
#bgColor: black;
#textColor: yellow;
body {background: #bgColor; color: #textColor;}
From JS:
less.modifyVars({
'#bgColor': 'blue',
'#textColor': 'red'
});
The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically
This less:
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
compiles to this CSS and this is all the browser knows about:
.title { color: #123456; }
.text { color: #234567; }
So, now you're effectively saying you want to change dynamically to this:
.title { color: #ff0000; }
You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:
.alternate.title { color: #ff0000; }
And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:
$(".title").addClass(".alternate");
In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:
var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
list[i].className += " alternate";
}
Related
I need to extend only several CSS rules in draft-js-emoji-plugin.
Documented way is to pass theme object to configuration:
const theme = {
emojiSelectButton: 'someclassname'
};
const emojiPlugin = createEmojiPlugin({theme});
Unfortunately, this overwrites entire theme classnames instead of adding single one. Based on comments in the code this behavior is by design:
// Styles are overwritten instead of merged as merging causes a lot of confusion.
//
// Why? Because when merging a developer needs to know all of the underlying
// styles which needs a deep dive into the code. Merging also makes it prone to
// errors when upgrading as basically every styling change would become a major
// breaking change. 1px of an increased padding can break a whole layout.
In related issue developers suggested to import draft-js-emoji-plugin/lib/plugin.css and extend it in code. Anyway, each classname in this file has suffixes (CSS modules) and they might be changed so it's reliable.
I don't know how can I apply several fixes without coping entire theme.
a better method would be to import {defaultTheme} from 'draft-js-emoji-plugin' and then extend it as below:
import emojiPlugin, { defaultTheme } from 'draft-js-emoji-plugin';
// say i need to extend the emojiSelectPopover's css then.
defaultTheme.emojiSelectPopover = defaultTheme.emojiSelectPopover + " own-class"
// own class is a class with your required enhanced css. this helps in preserving the old css.
const emojiPlugin = createEmojiPlugin({
theme : defaultTheme
})
and hence use the plugin as you like.
It's nice to have such flexibility, but it really is a pain to rewrite all classes.
What I did was to extract all class names to an object, and with styled-components, interpolated the classNames to the css definition. This way you can extend whatever you want, without worrying about styling a suffixed class (and it changing when they bump a version)
In this gist I've just copied all styles in v2.1.1 of draft-js-emoji-plugin
const theme = {
emoji: 'my-emoji',
emojiSuggestions: 'my-emojiSuggestions',
emojiSuggestionsEntry: 'my-emojiSuggestionsEntry',
// ...
emojiSelect: 'emojiSelect',
emojiSelectButton: 'emojiSelectButton',
emojiSelectButtonPressed: 'emojiSelectButtonPressed',
}
const StyledEmojiSelectWrapper = styled.div`
.${theme.emojiSelect} {
display: inline-block;
}
.${theme.emojiSelectButton}, .${theme.emojiSelectButtonPressed} {
margin: 0;
padding: 0;
width: 2.5em;
height: 1.5em;
box-sizing: border-box;
line-height: 1.2em;
font-size: 1.5em;
color: #888;
background: #fff;
border: 1px solid #ddd;
border-radius: 1.5em;
cursor: pointer;
}
.${theme.emojiSelectButton}:focus, .${theme.emojiSelectButtonPressed}:focus {
outline: 0;
/* reset for :focus */
}
// ...
`
export const GlobalStyleForEmojiSelect = createGlobalStyle`
.${theme.emoji} {
background-position: center;
//...
}
export default (props) => (
<StyledEmojiSelectWrapper>
<GlobalStyleForEmojiSelect />
<EmojiSelect /> // lib button component
</StyledEmojiSelectWrapper>
)
The function window.getComputedStyle is supposed to be able to get the computed style of pseudo classes like :hover, according to the documentation.
It's also explained as an answer in another question
But as the last comment says in that question, in fact it doesn't work at all, it just returns the normal style, not the :hover style. You can see for yourself in this jsfiddle. The alert returns the red color, not the green one.
The documentation on developer.mozilla.org also has an example, but that doesn't work either - see here.
In this question the answerer states in a comment that it won't work at all, but without giving an explanation.
Could it be that the stylesheet has to be fully rendered before the function returns the correct value? I've tried setting some delays, but nothing seems to work.
I've tried the latest Firefox, Chrome and IE browsers. Does anybody know why this function is not working as expected?
var style = window.getComputedStyle(element[, pseudoElt]);
where pseudoElt is "a string specifying the pseudo-element to match". A pseudo-element is something like ::before or ::after, those are elements which are generated by CSS styles. :hover, :visited or other similar effects are pseuodo-classes. They won't create new elements but apply specialized class styles to the element.
It's not possible to get the computed style of a pseudo-class, at least not with getComputedStyle. You can however traverse through the CSS rules and try to find a fitting selector, but I won't recommend you to do this, since some browsers won't follow the DOM-Level-2-Style rules and you would have to check which rule will affect your specific element:
/* Style */
p a:hover{ color:yellow; background:black;}
p > a:hover{ color:green; background:white;}
p > a+a:hover{ color:fuchsia; background:blue;}
// JS
var i,j, sel = /a:hover/;
for(i = 0; i < document.styleSheets.length; ++i){
for(j = 0; j < document.styleSheets[i].cssRules.length; ++j){
if(sel.test(document.styleSheets[i].cssRules[j].selectorText)){
console.log(
document.styleSheets[i].cssRules[j].selectorText,
document.styleSheets[i].cssRules[j].style.cssText
);
}
}
}
Result:
p a:hover color: yellow; background: none repeat scroll 0% 0% black;
p > a:hover color: green; background: none repeat scroll 0% 0% white;
p > a + a:hover color: fuchsia; background: none repeat scroll 0% 0% blue;
See also:
MDN: getComputedStyle examples
W3C: CSS2: 5.10 Pseudo-elements and pseudo-classes
SO: Setting CSS pseudo-class rules from JavaScript
Note that there is a way to do this at least for Chrome with the remote debugging port turned on. Basically you need to use a WebSocket, connect to the remote debugger url, then issue the following commands:
send { id: 1, method: "Inspector.enable" }
send { id: 2, method: "DOM.enable" }
send { id: 3, method: "CSS.enable" }
send { id: 4, method: "DOM.getDocument" }
send { id: 5, method: "DOM.querySelector", params: { nodeId: 1, selector: <<whatever you want>> } }
nodeId = response.result.nodeId
send { id: 6, method: "CSS.forcePseudoState", params: { nodeId:, forcedPseudoClasses: [ "hover" <<or whatever>> ] } }
Then you can use the regular getComputedStyle, or the CSS.getComputedStyleForNode debugger API.
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
Earlier my question was:-
I have the following code in my Sass css file
.random {
box-sizing: content-box;
text-align: center;
line-height: 1;
&:before {
display: inline-block;
margin-right: 0.2em;
width: 0;
height: 0;
border-right: 0.4em solid transparent;
border-left: 0.4em solid transparent;
content: "";
vertical-align: baseline;
}
}
.perc-neg:before {
border-top: 0.5em solid #FCB062;
}
.perc-neg.good:before {
border-top: 0.5em solid #98F1AC;
}
I have a div with
class = "random perc-neg good"
Now I want to change style of the above div. how to do it?
I tried following in console but it returns empty object
$("random perc-neg good:before").css("color","red");
$("random.perc-neg.good:before").css("color","red");
$(".random.perc-neg.good:before").css("color","red");
Someone has suggested its a possible duplicate but its not.
Int he related question, the user just wanted to make it visible or hidden so two classes will be sufficient.
But my requirement is to change the color as per user's choice which he can select from wide range of colors.
Its definitely impossible to define a class with each color changes.
And we cant pass some variable to css as well to change the color property accordingly.
Updated Question:
I am now using Sass.
I have defined an function to update the color
#function em($color) {
#return border-bottom: 0.5em solid $color;
}
.perc-neg.good:before {
em(#98F1AC);
}
definitely, I can call the function from the Sass file but how to call it from javascript
Now I want to pass the hex code of color from javascript
I need to pass something like this from javascript
.perc-neg.good:before(#98F1AC)
looked for the same in google did not find anything relevant
Instead of marking it as duplicate, it would be much better if you can provide a solution
You cannot access pseudo elements in Javascript since these elements are not in the DOM.
If you want the change pseudo elements styling, you need to predefine css classes for that purpose and add/remove those based on your triggering events.
If that is not possible, simply don't set the colorproperty on the pseudo element at all, but on the host element, since :before and :after will then inherit their host element's color property (if they don't have a specific color property assigned to themselves in CSS).
You cannot call a SASS / LESS function from javascript as they are both pre-compilers that just produce a static stylesheet.
If you have a limited color pallet you could create all the rules that cover your use cases.
However you do have the ability to create a style element with javascript and append new rules to it. Here is a simple example that you could expand on
// add Style is wrapped in a closure that locks in a single
// style element that you can add to on the fly
const addStyle = (() => {
// create and append the style element
const styleSheet = document.createElement('style')
document.head.appendChild(styleSheet)
const style = styleSheet.sheet
// helper function to serialize an object to a css string
const serializeStyle = (styles) => {
return Object.keys(styles).reduce((str, prop) => {
return str + kebabCase(prop) + ':' + styles[prop] + ';'
}, '')
}
// helper function to convert camelCase to kebab-case
const kebabCase = (str) =>
str.replace(/([A-Z])/g, (_, letter) => '-'+ letter.toUpperCase())
// return the public function
return (selector, styles) => {
// add a new rule to the created stylesheet
style.insertRule(
selector + '{' + serializeStyle(styles) + '}',
style.cssRules.length
)
}
})()
addStyle('.random::before', {
border: '10px solid #aec369'
})
addStyle('.random::before', {
background: '#bada55',
boxShadow: '5px 5px 10px #777'
})
const el = document.querySelector('#color')
const em = () => {
addStyle('.random::before', {
borderColor: el.value
})
}
el.addEventListener('keyup', em)
el.addEventListener('change', em)
.random {
position: relative;
background-color: #eee;
}
.random::before {
content: '';
display: block;
height: 200px;
width: 200px;
}
<input id="color" placeholder="#000000" />
<div class="random">
</div>
I'm building a syntax highlighting script and i've got some problems with my regex. I've been failing for about 2 days now so i need help.
I want to select everything that not /* */ or between them and this is what i got atm, not working tho, but seems close:
^(?!(\/\*.*\*\/)$)
An example of i want:
/* I want to select everything but these comments */
.class-1 {
font-family: 'SourceCodePro';
font-size: 16px;
line-height: 18px;
}
/* I want to select everything but these comments */
.class-2 {
background-color: rgb(40, 40, 40);
border: 1px solid rgb(20, 20, 20);
padding: 10px 15px 10px 15px;
}
I've solved the other regex selections for the rest of the code, but since it's applying to the comments also i need to first select everything but them.
You can try to use this one:
!(/\*.+?\*/)
Try this:
!(\/\*(.+)\*\/)
i cant check it now.
Take a look at this https://regex101.com/r/cN5aT1/2
/^(?!(\/\*(.+)\*\/)).*/gm
It is not working if comments are multiline
Removing comments | DEMO
For single // and multiline /* */
function filter(str)
{
var regex =/\/\/.+?(?=\n|\r|$)|\/\*[\s\S]+?\*\//g;
// if you want for multiline only then
// use var regex =/\/\*.+?\*\//g;
var temp = str.replace(regex,'');
alert(temp);
}
For standard browsers you can use something like this to change the coloring of selected text:
div.txtArea::selection {
background: transparent;
}
div.txtArea::-moz-selection {
background: transparent;
}
div.txtArea::-webkit-selection {
background: transparent;
}
But I need to do this with JavaScript instead.
My users can select text and then change the color. While they are selecting another color it updates the color constantly. Since the text is selected they can't see what the color looks like. I need to change the selection style of my targeted element to be transparent only during mouseover of the color changer.
I have tried a few things including:
$('div.txtArea').css({
'selection': 'transparent',
'-moz-selection': 'transparent',
'-webkit-selection': 'transparent'
});
Is there a way to do this with javascript?
There's no DOM interface for manipulating pseudo-classes. The only thing you can do is add the rules to a stylesheet. For instance:
// Get the first stylesheet
var ss = document.styleSheets[0]
// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);
}
You can access and change rules using stylesheet.cssRules[index].style, stylesheet.rules[index].style for IE, which is where it gets a little more complicated.
I didn't include an IE6-8 example using addRule() because those versions of IE don't support ::selection.