so I have this HTML code where I hide the body of the website using
<style>
body{
display: none;
}
</style>
<body>
<p>Something..</p>
</body>
but now I want to remove this using Javascript without giving the body an ID or a class. As a solution I've tried the following but it is not working.
document.getElementsByTagName("body")[0].removeAttribute("style");
Any help is appreciated. Thanks.
You can set document.body's display style property to unset:
document.body.style.display = "unset"
<style>
body {
display: none;
}
</style>
<body>
<p>Something..</p>
</body>
If you want to remove the style tags added in your HTML, you have to select it using document.getElementsByTagName and call remove method to its nodes.
Working Fiddle
document.getElementsByTagName("style")[0].remove();
body {
display: none;
}
<p>Something..</p>
If you want to set style to the element
If you just want to set the display style of body tag, you can do this with javascript using.
document.getElementsByTagName("body")[0].style.display
More Generic Solution
const body = document.getElementsByTagName("body")[0];
const targetStyles = {
display: 'block',
}
Object.entries(targetStyles).forEach(([style, value]) => body.style[style] = value);
body {
display: none;
}
<p>Something..</p>
What is the issue with your script?
document.getElementsByTagName("body")[0].removeAttribute("style");
This script selects the body tag from HTML and removed the inline style added to the body. Its will work for below template, but not for your requirement.
document.getElementsByTagName("body")[0].removeAttribute("style");
<body style="background: blue;">
<p>Something..</p>
</body>
Related
The thing is for js purpose I want a particular <style> tag to be removed from my document on an event. So for that, within my knowledge, I have added a class for it and removed on my event, eg:
<style class="custome_for_remove">
.selected_par>td,
.footer-tr>td {
position: relative;
display: table-cell!important
}.....
</style>
<script>
function customeRemove() {
$('.custome_for_remove').remove()
}
</script>
My concern is this HTML standard, is this a proper method.? I couldn't find any questions or answer related to this.
Yes! This totally works and it also seems to be valid syntax. Here's a little demonstration. According to https://validator.w3.org/ having a class in your style tag is considered valid html (you can also use an id if you want).
$("#test").click(() => {
$(".customClass").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style class="customClass">
p {
color: red;
}
</style>
<p>
Test
</p>
<button id="test">
remove
</button>
You can try the below code. It removes CSS perfectly.
function removeJs(){
$(".custome_for_remove").remove();
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<style class="custome_for_remove">
p {
color: red;
cursor: pointer;
}
</style>
<p onclick="removeJs()">
Click here!
</p>
Hi I need to print a document without buttons.Can anyone please guide me to accomplish this task.
I have a button to print in button click onclick() event I have used window.print() to print those data .But In a print preview It shows the page including those 4 buttons.i do not want those buttons I need only those data.
for more information I have adde the image below
add a wrapper to non-printable stuff i.e buttons in your case. check below code :
<head>
<style type="text/css">
#printable {
display: none;
}
#media print {
#non-printable {
display: none;
}
#printable {
display: block;
}
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Hope it helps.
Use CSS #media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.
<style type="text/css">
#media print {
#printbtn {
display : none;
}
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >
Refer #media print
Additional reference
You can specify different css rules for printing. Either you can use the #media print {} scope like this:
#media print {
/* Add your custom css rules here */
input {
display: none;
}
}
Or you can specify an entirely different css file to use like this (if you want to change your black background and white text to something more printer friendly):
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
1 Give your print button an ID:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`
Adjust your script the way that it hides the button before calling
window.print():
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>
To simply print a document using javascript, use the following code,
print(){
let w=window.open("www.url.com/pdf");
w.print();
w.close();
}
Just learning polymer. I want to grab the color of fixed-header when it is clicked.
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="fixed-header" attributes="height" style="background-color:blue">
<template>
<style>
:host {
display: block;
background-color: red;
}
::content * {
list-style-type: none;
}
</style>
<header layout horizontal on-click="{{changeColor}}">
<content select="li"></content>
</header>
</template>
<script>
Polymer('fixed-header', {
changeColor: function() {
var color = this.style.backgroundColor
console.log(color)
}
});
</script>
</polymer-element>
When I don't use the inline style on polymer-element, I can't use this.style.backgroundColor, even though it is definitely changing color to be red. Why can't I use this.style.backgroundColor when it is just through the template style tag?
Also, I'm trying to set the backgroundColor, but I can't do that either.
Returning an object representation of the contents of a node's style attribute is the expected behavior of the style property. What you want is getComputedStyle():
var color = getComputedStyle(this).backgroundColor;
Here's a working jsbin.
To your second comment, setting style works fine for me in Chrome 36 and 38.
I have some parent nav items with children and I don't need the parent items to be clickable.
They look like this:
Parent Item
Is there anyway to target the <a> tags with the specific class of .parent and make them unclickable?
If anyone interested in Pure CSS solution (As this question is tagged as CSS) than you can use pointer-events: none;
a[href="parent"] {
cursor: default;
pointer-events: none;
}
Demo
As far as support goes
Credits: Mozilla Developer Network
Use:
$(function () {
$('a.parent').on("click", function (e) {
e.preventDefault();
});
});
If you want to avoid using the jQuery library, it's just as easy without it:
var disabled = document.querySelector('.parent');
disabled.addEventListener('click', function(e) {e.preventDefault();}, false);
Another pure CSS option would be to overlay the link with an absolutely positioned "cover":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.parent {position: relative; z-index: -1;}
.parent:after {content: ""; position: absolute; top:0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
Disabled Link
Normal Link
</body>
</html>
Instead of a listener on every .parent, you can put a single listener on the body. The following will work in every browser in use without any library support:
function stopClickOnParentClass(evt) {
var el = evt.target || evt.srcElement;
if (/(^|\s)parent(\s|$)/.test(el.className)) {
evt.preventDefault();
return false;
}
}
then:
<body onclick="stopClickOnParent(event);" …>
You could also make the class dynamic by passing it to the function and building the regular expression from it.
I guess not as this is not working:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
$("p:after").addClass("allgone");
</script>
<style type="text/css">
p:after {
content: "daniel";
}
.allgone{
display: none;
}
</style>
<title></title>
</head>
<body>
<p></p>
</body>
</html>
JSFIDDLE
No, but you can add the class to the p element, and create an alternate style for it.
p:after {
content: "daniel";
}
p.allgone:after {
display: none;
}
$('p').addClass('allgone');
http://jsfiddle.net/xGUaY/
No, pseudo elements are not part of the DOM, and they can not be accessed via JavaScript.
I believe they are part of the Shadow DOM. The pseudo element is rendered by the browser as an inline element inside of the containing element, either as the first or last child.
No Since they are pseudo elements and not an actual DOM .
But you can do play with the class added, like say if you added the class box
then you can do .box:after and .box:before or .box::after and .box::before depending on the version you are coding.