Create css using javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

anshu-krishna / JS-CSS Public archive

License

anshu-krishna/JS-CSS

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

I recommend using SASS/SCSS for creating instead of this library. But, if for some reason you wish to create CSS in JavaScript this library might help.

class JSCSS has 5 properties:

let mydiv = new JSCSS('#mydiv'); // Add styles mydiv.style.color = 'blue'; mydiv.style.padding = '0.8em 1.2em'; mydiv.style['box-shadow'] = '0 0 3px black'; // Multi-valued properties can be assigned using arrays mydiv.style.background = [ '#844af0', '-webkit-gradient(linear, left top, left bottom, from(#844af0),to(#6d2de3))', 'linear-gradient(to bottom, #844af0 0%,#6d2de3 100%)' ]; // Remove style delete mydiv.style.background;

let highlight = new JSCSS; // Add selectors highlight.selectors.add('div.bold'); highlight.selectors.add('span.bold'); // Remove selector highlight.selectors.delete('div.bold'); // All the other Set functions are supported (like: has, entries etc.)

/*SCSS*/ #mydiv < color: blue; button < color: black; > >

/*CSS*/ #mydiv < color: blue; > #mydiv button < color: black; >

let mydiv = new JSCSS('#mydiv'); mydiv.style.color = 'blue'; mydiv.child.btn = new JSCSS('button'); mydiv.child.btn.style.color = 'black'; //A more easily readable way to do this will be let mydiv = new JSCSS('#mydiv'); mydiv.style.color = 'blue'; mydiv.child.btn = new JSCSS('button').addStyles( color: 'black' >); // Or let mydiv = new JSCSS('#mydiv'); mydiv.style.color = 'blue';  let btn = new JSCSS('button'); btn.style.color = 'black'; mydiv.child.btn = btn; > /* When rendered this code will produce: #mydiv  color: blue; > #mydiv button  color: black; > */

let mydiv = new JSCSS('#mydiv').addStyles( color: 'white', background: '#212121' >); document.head.appedChild(mydiv.styleElement);

let buttons = new JSCSS('button', 'input[type="button"]').addStyles( color: 'white', background: '#212121' >); buttons.child.hover = new JSCSS(':hover').addStyles( background: 'blue' >); buttons.child.active = new JSCSS(':active').addStyles( background: 'darkblue' >); /* The above code will render: button, input[type="button"]  color: white; background: #212121; > button :hover, input[type="button"] :hover  color: blue; > button :active, input[type="button"] :active  color: darkblue; > Which is not what we intened. */ // So we must disable the space between the child block // selector (:hover, :active) and the parent // selector (button, input[type="button"]) buttons.child.hover.spaceFromParentSelector = false; buttons.child.active.spaceFromParentSelector = false; /* Now the rendered code will be what we intended: button, input[type="button"]  color: white; background: #212121; > button:hover, input[type="button"]:hover  color: blue; > button:active, input[type="button"]:active  color: darkblue; > */

class JSCSS has 7 functions:

let mydiv = new JSCSS('#mydiv').addStyles( color: 'blue' >); console.log(mydiv.toString()); /* Logs: #mydiv  color: blue; > */

let mydiv = new JSCSS('#mydiv').addStyles( color: 'white', background: '#212121' >,  border: 'none' >,  'font-size': '1.2em'>);

Источник

Javascript Set CSS Set CSS styles with javascript

2. Global styles

 var style = document.createElement('style'); style.innerHTML = ` #target < color: blueviolet; >`; document.head.appendChild(style); 

3. CSSOM insertRule

 var style = document.createElement('style'); document.head.appendChild(style); style.sheet.insertRule('#target '); 

While it might look similar to the 2nd option, it’s definitely different.
As you can see in Chrome devtools, tag is empty, but the style (darkseagreen color) is applied to the element. Also the color can’t be changed via devtools because Chrome doesn’t allow editing dynamic CSS styles. Actually such behavior was the motivation to write this post. A popular CSS-in-JS library Styled Components use this feature to inject styles in production mode because of performance. This feature might be undesirable in specific projects or environments and some folks complain about it in the project’s issues.

4. Constructable Stylesheets (July 2019 update)

// Create our shared stylesheet: const sheet = new CSSStyleSheet(); sheet.replaceSync('#target '); // Apply the stylesheet to a document: document.adoptedStyleSheets = [sheet]; 

More details are here.
This option is only valid for Chrome, so use with caution. Do you know other options to add styles with javascript? What is your preferred option these days? Thanks for reading!

Источник