For example: i have <div class="oneClass twoClass colorRed">Content</div> and i want to find the color* class and replace the color part "Red" with the new value "Blue" or "Yellow" for example so it would be "colorBlue" now...
How do i do that with Javascript only ?
Thanks!
Update:
This isn't my question: Change an element's class with JavaScript
var node = document.getElementById('someDiv');
node.className = node.className.replace(/color.*/, 'colorBlue');
/* This css snippet will allow to see
* element's classes rendered with the html ;)*/
div:after {
content: attr(class);
margin-left: 5px;
font-style: italic;
color: gray;
}
<div id="someDiv" class="oneClass twoClass colorRed">Content</div>
Select the div tag.
Get the element.className of the div tag so you have the classnames as a string.
Use a regular expression to replace the colorRed part of the string with colorBlue.
use .className again to set the class of the div to your editted string.
If you don't have to support IE, you can use element.classList and its methods.
Related
So In javascript you can do things like
document.querySelector('html').style.filter = 'invert(100%)'
Which Inverts colors on the entire webpage
but is there anyway to use
document.querySelector('html').style.pointer = 'something'
or a way to
add a css rule or something to the document?
example
you have an element like this
hello
then js gives an class
hello
then js adds a css rule?
.why {}
You could write to the document using document.write
document.write(`
<style>
#text {
color: red;
}
</style>`)
<h1 id='text'>Hello</h1>
Or, you can also create an element and append it to the document
let style = document.createElement('style')
style.innerHTML = `
.text {
color: red;
}
`
document.body.appendChild(style)
<h1 class='text'>Hello</h1>
You can add a css class to specific element with (and then create the styles from the css file):
[NameOfTheElement].classList.add("mystyle")
This will work for the document:
document.querySelector('html').classList.add('new-class');
This will work for the body:
document.querySelector('body').classList.add('new-body-class')
There are a few ways.
If you already have styles defined for a certain class within your stylesheet, you can do what Erasmo said above:
element.classList.add('className');
You can also use:
element.style.color = 'white';
Or add a style attribute to the element:
element.setAttribute('style', 'color: white; background-color: green;');
I need to be able to change out the css applied to the <body> on the fly. How, using javascript, could this be accomplished?
My css is stored as a string in a Javascript variable. I am not working with css files. The css consists of around 50 classes, so it doesn't make sense to apply them one-by-one. I know how this could be accomplished by changing the lowest class, but I'm just trying to see if it's possible to do using Javascript commands and variables.
Pseudo Code
var x = "#nav-bar-wrapper {
background-color: #4a3e7d;
padding: 20px 0;
}
#header-nav {
display: flex;
justify-content: center;
}...";
function changeCss() {
var el = $('myelement');
SomeJavaScriptFunction(el, x);
}
As #evolutionbox pointed out, it looks like you want to add new styles to the page. If so, just add them as text content in a style element:
const css = '#nav-bar-wrapper { ... }'
function changeCss() {
const el = document.createElement('style')
el.textContent = css
document.head.appendChild(el)
}
One easy way of doing it would be:
document.querySelector("yourElement").style.cssText += "Your super long string will go here and itll work"
Although, I dont think theres a way of giving different elements a uniqe style all in one line other than appending a style tag to the html. To use the method above, you'd have to separate #nav-bar-wrapper and #header-nav
Just keep in mind to use `` rather than "" to make the string go onto multiple lines
Here's a more JavaScript-y method than using hacky style tags.
const button = document.getElementById('button');
button.onclick = () => {
[
[ 'background', 'black' ],
[ 'color', 'white' ]
].map(([ prop, val ]) => {
button.style[prop] = val;
});
};
<button id="button">Hello there</button>
You could also try out https://cssinjs.org, which also works great in React.
Perhaps using jQuery's .css() function is worthy too: https://api.jquery.com/css/. It can take an object of CSS properties and apply them to an element.
$('#button').on('click', () => {
$('#button').css({ background: 'black', color: 'white' });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="button">Hi there</button>
You could also create a new style tag and append it to the body as many people have said. You can even append an external link rel="stylesheet" tag to the header to dynamically add a stylesheet from another URL! An alternative to this would be using the fetch API/jQuery AJAX/xmlhttprequest plus the code below:
$('#button').on('click', () => {
$('body').append('<style>#button { background: black; color: white; }</style>');
});
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="button">Hi there</button>
</body>
Another approach is using classes that you can dynamically add in JavaScript.
$('button').on('click', () => $('#button').addClass('clicked'));
.clicked {
background: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="button">Hi there</button>
You need to get a reference of your html element and after manipulate the DOM, here is an example:
document.getElementById('yourElementIdHere').style.color = 'red';
If you want to get your body reference to manipulate the DOM, you can do it. After this, you can change the style of your body using the style property, and use your string with your css.
document.querySelector("body").style = yourCssStringVar;
This link can help you, too:
JavaScript HTML DOM - Changing CSS
I would like to change the styling attribute values of all elements that have the class "post-feature" and contain an attribute value of "http"
So the div element will look like the following:
<div class="post-feature" style="backgroundimage:url(http://local.test.com/test_image.jpg);">
So far the http check works. But I am not able to set the attribute value.
I have the following code
var features = document.getElementsByClassName(".post-feature")
[0].getAttribute("style");
if (features.includes("http")) {
features.setAttribute("background-color", "orange");
} else {
alert('no change');
}
You can use querySelectorAll('.post-feature[style*="http"]') to find those elements.
Then simply iterate through them and i.e. set their background color with
element.style.backgroundColor = 'orange';
Now, if you want to make sure you only target elements having a background-image and http, you can use this selector:
querySelectorAll('.post-feature[style*="http"][style*="background-image"]')
Also, by adding an i (or I) just before the end bracket [style*="http"i], the value will be compared case-insensitively.
window.addEventListener('load', function() {
var elements = document.querySelectorAll('.post-feature[style*="http"]');
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'orange'; /* add propert value */
/* replace class
elements[i].className = 'myClass';
*/
/* add a class
elements[i].classList.add('myClass');
*/
}
/* temp log */
console.log('Found ', elements.length,' element(s)');
})
div {
height: 40px;
background-color: gray;
}
div + div {
margin-top: 10px;
}
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>
<div class="post-feature"></div>
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>
<div class="post-feature"></div>
Updated
To only change styling, like colors etc., you don't even need a script, you can use CSS alone
div {
height: 40px;
background-color: gray;
}
div + div {
margin-top: 10px;
}
/* for elements that contain "http" and "background-image" */
.post-feature[style*="http"i][style*="background-image"i] {
background-color: orange;
}
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>
<div class="post-feature"></div>
<div class="post-feature" style="background-image:url(HTTP://local.test.com/test_image.jpg);"></div>
<div class="post-feature"></div>
As a note, and as discussed in a few comments, if to make sure it is the background-image property that also contain the http in its url(), you can adjust the selector to this, which as well can be used without any script, as a CSS rule
.post-feature[style*="background-image:url(http"i] {
background-color: orange;
}
The above selector can of course also be used in the first sample, like this
querySelectorAll('.post-feature[style*="background-image:url(http"i]')
First, you can use querySelctorAll() with a CSS query that selects the elements with the class you desire and, in most cases, you should use this instead of getElementsByClassName() as that returns a "live node list" that causes the DOM to be re-scanned every time you access it.
Next, setAttribute() is for setting HTML element attributes. You are asking to change the value of a CSS property. While that could be accomplished with setAttribute('style', value), it is very "old-school" and not the best approach, nor is getAttribute('style') the best way to read a CSS property value (it won't work if the CSS was set from a style sheet).
Also, your code is trying to access: backgroundimage, but the property is accessed as background-image when working in CSS and backgroundImage when accessing it via JavaScript.
To access the inline styles applied to an HTML element, just access the style property of that element, followed by the name of the CSS property you are interested in. For example:
var bColor = element.style.backgroundColor;
If the style has been applied to the element from an internal style sheet or an external style sheet, the above approach won't work for you and you'll need to get it another way, via window.getComputedStyle():
var bColor = window.getComputedStyle(element, null).backgroundColor;
But, note that getComputedStyle() doesn't always return the same value that you set - - it's the value after the browser has computed all factors. In this case, even paths that you wrote as relative references (without the "http") will be returned as absolute paths (with the http).
So, here is a modern approach that correctly checks only the background-image CSS property for the presence of http.
NOTE: This solution tests for http specifically in the background-image property. Unlike most of the other answers given, this code will correctly ignore http in other CSS properties besides background-image. Examine the CSS of the last div to see this in action.
// querySelectorAll() is more efficient than getElementsByClassName()
var features = document.querySelectorAll(".post-feature");
// Loop over the list
for(var i = 0; i < features.length; i++){
// Get access to the background-image property (called backgroundImage from JavaScript) value,
// convert that value to lower case and check to see if "http" is in that value
if(features[i].style.backgroundImage.toLowerCase().indexOf("http") > -1){
// Set the CSS background-color property (called "backgroundColor" in JavaScript) to orange:
features[i].style.backgroundColor = "orange";
// Just for testing:
features[i].textContent = features[i].style.backgroundImage;
} else {
alert("No change");
}
}
.post-feature { width:100%; height:50px; border:1px solid black; background-color:gray; color:yellow; }
<!-- The correct CSS property is "background-image", not "backgroundimage" -->
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>
<div class="post-feature" style="background-image:url(test_image.jpg);"></div>
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>
<div class="post-feature"
style="border-image: url('http:///images/border.png') 30 30 repeat;background-image:url(test_image.jpg);">I have "http" in one of my CSS properties, but not "background-image", so I shouldn't be orange.</div>
i think some wrong in your code, try this code
element.setAttribute("style", "background-color: orange;"); // bad
or
element.style.backgroundColor = "orange"; // good
Use element.style.backgroundColor and indexOf
var features = document.getElementsByClassName(".post-feature")[0].getAttribute("style");
if (features.indexOf("http") > -1) {
features.style.backgroundColor = "orange";
} else {
alert('no change');
}
check this fiddle
https://jsfiddle.net/vywk72j8/2/
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);">
tt</div>
var feature = document.getElementsByClassName("post-feature")[0];
if (feature.style.backgroundImage.indexOf("http") !== -1) {
feature.style.backgroundColor = "orange";
} else {
alert('no change');
}
In your code, you are fetching the attribute value in features
var features = document.getElementsByClassName(".post-feature")
[0].getAttribute("style");
Here features is a string containing attribute value, not an element so you cannot use it to set value.
I have a pseudoelement :after content defined in CSS.
div:after {
content:'This is the sentence.';
}
Can anyone please advise me how to target the first character of the content and change its style. Jquery is OK but I'm trying to do it with first* pseudoelement.
The only time :first-letter could possibly match the first letter of an :after pseudo-element is if the pseudo-element is inline, and there is no other content preceding the pseudo-element (at least in the usual LTR writing mode anyway). Furthermore, pseudo-elements cannot contain their own pseudo-elements, so you couldn't do :after:first-letter either.
If your div element has content, then you won't be able to do this using an :after pseudo-element. You will need to use an actual child element instead. You can easily generate one using jQuery's .append() method, but if you want to target :first-letter of that element, you will need to display it as either block or inline-block instead of inline:
$('div').append('<span class="after">This is the sentence.</span>');
div > .after {
display: inline-block;
}
div > .after:first-letter {
color: red;
}
You won't be able to do anything like div::after::first-letter for the time being, but you can achieve the same end-results relatively easily by merely creating the content you wish to manipulate, and injecting it into your DOM where the div::after pseudo elements would have been placed had they been used:
(function () {
var aftr = document.createElement( "div" ),
divs = document.querySelectorAll( "div" );
aftr.className = "after";
aftr.textContent = "This is the sentence.";
for ( var i = 0; i < divs.length; i++ ) {
divs.item(i).appendChild( aftr.cloneNode( true ) );
}
}());
With these elements now in place, you can move on to styling them:
.after:last-child::first-letter {
color: red;
padding: .5em 1em;
border: 1px solid red;
}
Fiddle: http://jsfiddle.net/jonathansampson/7gmbvewh/
One thing that immediately makes me uncomfortable is the distance between the markup and the text you want displayed within these elements. You could place the text within the markup as a data attribute:
<div data-after="After content">Original Content</div>
And then use that (if it exists) in the final loop:
for ( var i = 0; i < divs.length; i++ ) {
var clone = aftr.cloneNode( true ),
after = divs.item(i).dataset.after;
if ( after ) {
clone.textContent = after;
}
divs.item(i).appendChild( clone );
}
Fiddle: http://jsfiddle.net/jonathansampson/7gmbvewh/2/
If this is a feature question, then the answer is:
Unfortunatelly you can't target and manipulate with pseudo-elements.
But there are workarounds (don't use :after, but actual elements), read the comments under your question.
New to JavaScript and CSS and I am trying to give the user a button that will change the background color of a game board (set up with div) randomly when pressed.
<style type="text/css">
div.conway {
overflow: hidden;
font-family: courier;
float: left;
width: 800px;
height: 488px;
background-color: green;
font-size: 10px;
color: gold;
}
</style>
and inside my script tag I have the following:
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
my.changeBackgroundColor = function () {
document.getElementById(conway).style.background-color = getRandomColor();
}
But the DOM is not letting me assign the new color. What am I doing wrong?
background-color should be backgroundColor:
document.getElementById(conway).style.backgroundColor = getRandomColor();
or this is allowed as well:
document.getElementById(conway).style["background-color"] = getRandomColor();
In JavaScript, you can refer to an object property using dotted notation and a property name literal (obj.foo), or using bracketed notation and a property name string (obj["foo"]). A property name literal has to be a valid JavaScript identifier, and obviously you can't have a - in an identifier, it looks like a minus sign. So instead, camelCase is used where hyphens would normally be in the style object.
Side note: You haven't shown your HTML, or the content of your conway variable, but I assume you have an id on the element in question, and that the conway variable contains that id. E.g.:
<div id="cell23">...</div>
and
conway = "cell23"
Try using backgroundColor instead off of style.
JS is treating - as the minus operator.
The problem is that you are trying to access the DOM element by ID using document.getElementById(conway) but conway is a class. So you either have to give the targeted div an ID or use document.getElementsByClassName('conway'); which will effectively get all of the element that have a class name conway. Not sure if that is what you want.
You are calling the wrong property. It should be:
my.changeBackgroundColor = function() {
document.getElementById(conway).style.backgroundColor = getRandomColor();
}
Here is working js fiddle example
You had few problems within your code,
Line:
document.getElementById(conway).style.background-color = getRandomColor();
Should be defined as: (see how backgroundColor is written and usage of "" for id).
document.getElementById("conway").style.backgroundColor = getRandomColor();
Also, remember to apply your styles to id element (can't see whether your div has a class conway defined or not.)
div#conway { .. }
After that it works great.
I also recommend that you check CSS properties reference which lists formats used for giving css attributes using javascript. In other words, the problem which you had.!
Cheers.