Menu
Community /Pin to ProfileBookmark
@cootheadSep 15.2019 — #Hi there RaulRogojan,
instead of using javascript to manipulate CSS conditions,
use it to add and remove CSS classes. ;)
Here is a basic example...
_coothead_@cootheadSep 15.2019 — #Hi there RaulRogojan,
if you do not feel comfortable using CSS classes,
then you will need to use these...
**Further reading:-**
[url=https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle][color=#069]MDN - window.getComputedStyle()[/color] [/url]
_coothead_
How can I remove the css
How can I remove cssSetyle if the counter is not === 3?
[code]
if (counter === 3) {
const sideBar = document.querySelector(“.side-bar”);
const navButtons = document.querySelector(“.buttons”);
const cssStyle = “opacity: 0; pointerEvents: none”;
const transitionSetyle = “opacity 200ms ease-in”;
sideBar.style.cssText = cssStyle;
navDots.style.cssText = cssStyle;
navButtons.style.cssText = cssStyle;
sideBar.style.transition = transitionSetyle;
navDots.style.transition = transitionSetyle;
navButtons.style.transition = transitionSetyle;
// sections[3].style.overflow = “scroll”;
} else {
const removeCssStyle = “”;
sideBar.style.cssText = removeCssStyle;
navDots.style.cssText = removeCssStyle;
navButtons.style.cssText = removeCssStyle;
}
Sign in
to post a comment6 Comments(s) ↴
0
@cootheadSep 15.2019 — #Hi there RaulRogojan,instead of using javascript to manipulate CSS conditions,
use it to add and remove CSS classes. ;)
Here is a basic example...
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Remove CSS from Javascript</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
h1 {
font-size:1.5em;
color: #555;
text-align:center;
}
#button {
display:inline-block;
padding: 0.5em 1em;
border: 1px solid #999;
border-radius: 0.75em;
background-image: linear-gradient( to bottom, #fff, #ccc );
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
font-size: 1.5em;
cursor: pointer;
}
#lorem {
box-sizing: border-box;
max-width: 50em;
padding: 2em;
margin: auto;
border: 1px solid #999;
border-radius: 0.75em;
background-color: #fff;
box-shadow: inset 0 0 0 rgba( 0, 0, 0, 0.4 ),
0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
transition: opacity 1.5s ease-in-out;
}
.hide {
opacity: 0
}
.show {
opacity: 1;
}
</style>
</head>
<body>
<h1>Remove CSS from Javascript</h1>
<input id="button" type="button" value="show">
<p id="lorem" class="hide">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut
</p>
<script>
(function( d ) {
'use strict';
var count = 0,
lor = d.querySelector( '#lorem' ),
but = d.querySelector( '#button' );
but.addEventListener( 'click' ,
function() {
if ( count === 0 ) {
lor.classList.remove( 'hide' );
lor.classList.add( 'show' );
but.value = 'hide'
count = 1;
}
else {
lor.classList.remove( 'show' );
lor.classList.add( 'hide' );
but.value = 'show'
count = 0;
}
}, false );
}( document ));
</script>
</body>
</html><i>
</i>``_coothead_
0
@cootheadSep 15.2019 — #Hi there RaulRogojan,if you do not feel comfortable using CSS classes,
then you will need to use these...
getComputedStyle()`</C></LI>
<LI>2. <C>`getPropertyValue()``**Further reading:-**
_coothead_