Coding Schools

JavaScript - Basic Structure
Closures in JavaScript
Using CSS in Javascript
OOPS in Javascript
Popup Window in Javascript
Printout a page in Javascript
Variable declaration in JavaScript
Difference of let, var and const
JavaScript - JSON Parse & Stringify

Using CSS in Javascript

Using CSS in JavaScript can be accomplished in several ways, depending on your specific requirements. Here are some common methods:

Inline Styles

You can directly add CSS styles to HTML elements using the style property in JavaScript.

javascript

const element = document.getElementById('myElement');
element.style.backgroundColor = 'lightblue';
element.style.padding = '10px';
element.style.border = '1px solid black';

Creating and Inserting a Style Element

You can create a <style> element, add CSS rules to it, and then append it to the document's head.

javascript

const style = document.createElement('style');
style.textContent = `
  #myElement {
    background-color: lightblue;
    padding: 10px;
    border: 1px solid black;
  }
`;
document.head.append(style);

Adding/Removing CSS Classes

You can dynamically add or remove CSS classes to elements, leveraging predefined CSS rules.

html

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<script>
  const element = document.getElementById('myElement');
  element.classList.add('highlight');

  // To remove the class
  // element.classList.remove('highlight');
</script>

Using Libraries (e.g., jQuery)

You can use JavaScript libraries like jQuery to simplify the process of manipulating styles.

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('#myElement').css({
      'background-color': 'lightblue',
      'padding': '10px',
      'border': '1px solid black'
    });
  });
</script>

CSS-in-JS Libraries

For React or other modern front-end frameworks, there are CSS-in-JS libraries like styled-components or emotion.

Example with `styled-components` in React

javascript

import styled from 'styled-components';

const MyElement = styled.div`
  background-color: lightblue;
  padding: 10px;
  border: 1px solid black;
`;

function App() {
  return <MyElement>Styled Component</MyElement>;
}

export default App;

Each of these methods has its own use cases and advantages. The best method to use depends on the complexity of your project and your specific needs. Let me know if you'd like more detailed examples or have any other questions!

Coding Schools

Using CSS in Javascript

Inline Styles

Creating and Inserting a Style Element

Adding/Removing CSS Classes

Using Libraries (e.g., jQuery)

CSS-in-JS Libraries

Example with styled-components in React

Example with `styled-components` in React