How to disable all styles for specific group of elements - javascript

is it possible to disable css styles for specific group of html elements?
To be more specific, I have html document and many css styles and I want to set default css for some elements (or remove/disable all styles for those elements).
Is there any way to do this using html/css/javascript? Setting all styles to default one by one takes time.
In addition I can say that it can be done by nesting part of code to iframe (because it doesn't inherit styles) but it is not much pretty way at all.
Thanks for help.

Add a class to the <body> tag?
HTML
<body class="default-theme">
<p> ... </p>
<ul>
<li> .. </li>
<ul>
</body>
CSS
body.default-theme p {
... default settings ...
}
body.default-theme li {
.. more css ...
}

How are the elements grouped? Is it by a particular class name? If so you could do the following to clear out the style's or set them to a particular value
var all = document.getElementsByTagName('theClass');
for (var index in all) {
var element = all[index];
element.style = {};
}

If you control the stylesheet, then you can just make all the styles depend upon a master class in the body element. Then, you can turn all those rules on/off by simply adding or removing that class from the body element.
Suppose the class name is "master". When the "master" class name is on the body element like this:
<body class="master">
then all these rules will be in force:
.master .selected {color: blue;}
.master #breadcrumb {color: red;}
If you then remove the "master" class from the body tag with script, all those rules will stop being applied instantly.
Obviously, you don't have to use the body tag. You can use any common parent object of all the effected elements.

Related

showing/hiding html elements with javascript

which option among the following is better or used as a standard way to show/hide the html elements
changing element.style.display
adding/removing a separate class called hide {display: none}
any other standard way
PS: this JavaScript hide/show element question uses the first option mentioned( changes the style to block to show which may not be desired). I would like to know whether this method is used in most websites or the adding /removing a separate class or any other way
A third way in the answers below https://stackoverflow.com/a/68983509/14478972
I prefer to toggle a class using DOMTokenList.toggle():
The toggle() method of the DOMTokenList interface removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.
Well except the first and second, there is the other way.
Which is rendering the element its self.
It has a better security. as the user wont know if there is a hidden element inside the toggle div. Eg when people try to look at the html
Have a look below
I used jQuery as its easier to write. If you are not able to rewrite a JavaScript version will be happy to rewrite for you.
var items = $(".toggle");
var item = {};
// setup the auto toggle
$(".toggle").each(function(el) {
var id = new Date().getUTCMilliseconds() + $(this).index()
item[id] = $(this).find("content")
if (!$(this).hasClass("show")){
$(this).find("content").remove();
}
$(this).attr("id", id)
});
$(".toggle").click(function() {
if ($(this).find("content").length > 0)
$(this).find("content").remove();
else $(this).append(item[$(this).attr("id")])
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">
<h1>click here to toggle content </h1>
<content>
this is a test
</content>
</div>
<div class="toggle show">
<h1>click here to toggle content(start state is visible) </h1>
<content>
this is a test
</content>
</div>
Option 1 would be standard for only hiding the element, but if you would like to add other styles like transitions and pointer events option 2 is preferred

Add CSS class to JS script and Trigger With Button (night mode)

In my header.php template, I have a button that looks like this, in my stylesheet, I have the following CSS code and In an already enqueued JS file, I have this:
function NightModeToggle(){
var element = document.body;
element.classList.toggle("NightModeToggle");
}
.NightModeToggle{
background-color: black;
color: white;
}
<button onclick="NightModeToggle()">Dark</button>
I understand that it targets the body by using this line: var element = document.body;
My question is, how do I add additional targets so that I can change the background color and text color of the header and footer as well?
I tried modifying the code into this (without result):
var element = document.body;
var element = document.header;
var element = document.footer;
Any ideas?
Depending on the structure of your HTML, you will need to target your other elements by using document.querySelector() and passing in the selector of the element you want to target, e.g.:
document.querySelector('footer') // If you use a <footer> tag
document.querySelector('#footer') // If you use e.g. <div id="footer">
document.querySelector('.footer') // If you use e.g. <div class="footer">
You can also use document.querySelector('body') instead of document.body to keep this approach consistent.
The reason document.body works is that body is a property of the document object that contains the contents of the document (the <body> tag). Similarly, document.head will return the content of the <head> tag in your HTML.

JavaScript: Select an element to a div and update styling

I need to add styling to a DIV element using JavaScript. I have the following DIV in my document:
<div class="RnEpo Yx5HN " role="presentation">
The script that I have tried is:
WebElement = document.querySelectorAll("div[class='RnEpo Yx5HN ']");
WebElement.style='height: 10000px;'
WebElement.setAttribute("height = 1000px;");
I want to achieve the same styling as this CSS:
.RnEpo Yx5HN
{
height: 100000px;
}
To achieve what you require, first replace querySelectorAll() with querySelector() seeing that your only need to select the first matching element.
Consider also revising your selector from div[class='RnEpo Yx5HN '] to a more robust selector in the form of div.RnEpo.Yx5HN which is to say:
Select div elements that have classes any ordering of class RnEpo and Yx5HN
Lastly, revise the way that you're applying the inline style so that the height attribute is directly specified on the WebElement style object.
These changes make the call to setAttribute() redundant. Note also that; setAttribute() takes two arguments, and the DIV element does not have a native height attribute.
Here's a working snippet showing this in action:
/* Use querySelector() to select first matching element and use dot notation syntax to select div with both classes */
const WebElement = document.querySelector("div.RnEpo.Yx5HN");
/* Apply inline style, avoid invalid setAttribute call */
WebElement.style.height = `10000px;'
<div class="RnEpo Yx5HN" role="presentation">

How to use js to query shadow dom element in Polymer?

I know how to query shadow dom element in <style> tag,but i want to use data-bind dynamically change the style,data-bind can not be applied in <style> in Polymer,so i should make it happen in js.For example,i use core-scroll-header-panel component, i can query its background style using:
<style>
core-scroll-header-panel::shadow #headerBg {
background: #5cebca;
}
</style>
but how can implement it in js?
Here's the way to select your element:
var shadow = document.querySelector('core-scroll-header-panel').shadowRoot;
var header = shadow.querySelector('#headerBg');
Note that it will return one single element. If you need to loop over multiple element you may use querySelectorAll as you probably know.
You can then change your background color as normal:
header.style.backgroundColor = "#5cebca";
However, changing a color in directly in JavaScript is not adviced and you should use CSS for that.
header.className = "my_css_class";
Note that it will return one single element. If you need to loop over multiple element you may use querySelectorAll as you probably know.
I have tried it out :
document.querySelector('core-scroll-header-panel::shadow #headerBg');
and is there any else solutions?

Hide dynamic div element in javascript and/or html

I'm kind of new at this so bear with me. I am trying to hide a specific dynamic div element (it's a catalog) out of a list of 6 elements (catalogs) but not having much luck. To be specific, catalogid="3" needs to be hidden on the page yet still remain active. If the exact url for that catalog is pasted into the browser, the catalog should be accessible. Basically, it is going to be a hidden catalog only given to specific customers in order to buy specific products.
Here is the HTML:
<span catalogLink='index.html?action=courseBrowse&CatalogID=${CatalogID}' style="color:#fff">${Name}</span>
And here is the Java script code:
location.href =getHostingHTML()+"?action=courseBrowse&CatalogID="+catalogID;
Question: Can I just put a snip-it of code under either of those lines that would simply hide catalog 3 after execution?
I think you should try to give this css attribute to the span element.
span {
display:none;
}
this will do the trick
span {
display:none;
}
however, this will hide every span in your entire website. You might want to add a class to the specific span class you would like to hide:
<span class="hide-me" catalogLink='index.html?action=courseBrowse&CatalogID=${CatalogID}' style="color:#fff">${Name}</span>
<style type="text/css">
.hide-me{
display:none;
}
</style>
additionally you could do this as well
<span catalogLink='index.html?action=courseBrowse&CatalogID=${CatalogID}' style="color:#fff; display:none;">${Name}</span>
Try this:
<span id='myspan' catalogLink='index.html?action=courseBrowse&CatalogID=${CatalogID}'style="color:#fff">${Name}</span>
I recomend to add an Id to your span, and then dinamically, in your javascript call the following:
document.getElementById("myspan").style["display"] = "none";

Categories