Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am creating custom HTML tags. I want to know if was possible to add CSS properties to HTML tags with JavaScript without adding, use css file or appear the "style" attribute on the HTML tag, example:
NO:
<-my-tag style="color:red">STACKOVERFLOW</-my-tag>
YES:
<-my-tag>STACKOVERFLOW</-my-tag>
And the result like this
You can create a style element in DOM and append anything to it which will automatically apply to your element
const appendStyle = (customStyles) => {
const styleEl = document.createElement('style');
styleEl.innterHTML = `yourTagName {${customStyles}}`;
document.body.appendChild(styleEl);
}
appendStyle('background-color: red; font-size: 15');
Yes you can either add a separate .css file and place there your styles.
Like style.css
yourTagName {
color: red;
}
And then include it within the <head></head> section of HTML using <link> or you could add your styles within the <style> tag in the <head> section as well.
Check W3 HTML Styles - CSS to learn more.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 days ago.
Improve this question
Im more of a C++ and plain JS type of dude, and I feel absolutely stupid not being able to find this out.
I tried doing this
<button1 id="coolbutton" type="button">
My JSFiddle Account
</button1>
along with this CSS code
button1 {
font-family: Verdana;
color: purple;
background-color: grey;
text-align: center;
text-decoration-line: overline underline;
}
html {
background-color: #666699;
}
body {
background-color: #666699;
}
Not feeling so good about my "Epic Coding Skills" because I feel like it's easier than I think.
The HTML Living Standard defines what element types exist in HTML (along with a format for naming custom elements.
It defines, for example, button and html. It does not define button1, and button1 does not meet the custom element format.
You have tried to create a button1 element in your HTML, which is invalid HTML and triggers error recovery in browsers.
You have written a CSS type selector to try to select it, and whatever is reporting that error knows you are trying to find an element in an HTML document where button1 elements are not allowed.
Use id and class attributes to define specific (or groups of specific) elements. Select the type based on the semantics it has. Don't invent new types.
there is no <button1> element what you are looking for is simply the <button> </button>. Do your CSS on the coolButton id (or the id of the button you want to change)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am developing a chrome extension in which I need to clone the body tag-childrens. (a clone - so that the elements does not get updated when the DOM changes). And Re-append them to the body tag, without the script tags.
I am doing this to avoid the script tags for executing.
The problem is that I don't want script tags cloned along with the other elements in the body. I read that using regex to filter/search for stuff in the html is general not a good idea.
How can I accomplish my goals, what are my options?
A vanilla javascript approach might look like the following.
var div = document.createElement('div');
div.innerHTML = document.body.innerHTML;
div.querySelectorAll('script').forEach(function(scriptTag) {
scriptTag.parentNode.removeChild(scriptTag);
});
document.body.innerHTML = div.innerHTML;
<div>
A div
</div>
<script>
console.log('hi');
</script>
<p>
A paragraph
</p>
Using jQuery you could try something like:
var $clone = $('<div>').append($('body').html())
$clone.find('script').remove()
Then when you want to replace:
$('body').html($clone.html())
Note that all event listeners will be lost with this approach
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to disable a href tag when the link of it is # , the reason i want to do this is because i have lots of post on my webpage that have links poiting to other sites that are my partners.
When i make a post i have a template that make it easier on me to put information on it and have the href link ready if anyone site that has to do with the post want a partnership and i link it to them .
Some of my old post have href tags with # value on it and when i click on them they open up my page on another tab so thats why i would like to disable it if possible with javascript (anyone other script language that can do the job is fine too)
Thanks
Simplest way would be:
var emptyAnchors = document.querySelectorAll('a[href="#"]');
for (var i = 0; i < emptyAnchors.length; i++) {
emptyAnchors[i].addEventListener('click', preventDefaultEvent);
}
function preventDefaultEvent(e) {
e.preventDefault();
}
This will prevent the default behavior on a link click (open the href target).
You can select your a tag with the specific # href
ES6 syntax
const elements = document.getElementsByTagName("a[href='#']");
ES5 syntax
var elements = document.getElementsByTagName("a[href='#']");
then add a preventDefault() on the event of each element to make sure the default behaviour won't be executed.
ES6 syntax
elements.addEventListener('click', e => {
e.preventDefault();
});
ES5 syntax
elements.addEventListener('click', function(e){
e.preventDefault();
});
If you want you can just add css to make the a tag lose its default style
a[href="#"] {
color: black;
pointer-events: none;
text-decoration: none;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have the following HTML
<div id="example">
...some text...
<script type="text/javascript">
... some javascript...
</script>
</div>
How to get content of #example but also without the JavaScript tags or JavaScript code?
And to answer the general question, if you need to get the contents of a node with some of the children not included, you probably need to remove the tags you don't want in there, in your case the script tags.
If you need to keep the original intact, take a look at cloneNode (https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) on how to get a clone of the node that you can work on without touching the original.
If you just want to grab the text that's inside the id="example", you could just use:
var getExample = document.getElementById('example').innerHTML;
or with jQuery:
var $getExample = $('#example').html();
I'm assuming you just didn't want the JavaScript inside the id="example" div, being as you tagged this JavaScript. In that case you could create a JavaScript file and add it with
<script src="javascriptFileName.js"></script>
this would be placed at the bottom of the body.
With jquery you can try this way. See here http://jsfiddle.net/AnjJa/129/
var el = $('#example').clone();
el.find('script').remove();
alert(el.html());
But why you put the JS there?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a dynamic troublesome website;
Wondering if I could write an if statement with jQuery or raw JS that would hide an element based on if another element is underneath it.
So something like; if an <h1> tag is directly beneath my div id, keep my div element present; all else display: none;
You can use not, has and first-child selector:
$('div:not(:has(>h1:first-child))').hide();
Demo: http://jsfiddle.net/c9emjotg/
You could use css to hide all the appropriate divs, then use jquery to show them if they contain an <h1>
$('h1').parent('.sometimesHeader').show();
.sometimesHeader {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sometimesHeader">I don't have an h1</div>
<div class="sometimesHeader"><h1>H1 is here!</h1></div>