How to change a background that is declared in .css not html - javascript

USING JAVASCRIPT, NO JQUERY
Hi all,
I know this is a basic one but I am hitting a dead end.
I want to change a background image that is in the .css, not the html so I cant give it an id. I managed to remove the image using:
var headerImg = document.getElementById('header').background = 'none';
And tried :
var headerImg = document.getElementById('header').background = 'images/new-header.jpg;
But that did'nt work.
I have no idea how to change the Image, and in the dev tools the url does not even change when I try to run my code Any help would be great, Thanks.

You're close. You're just off on the syntax slightly...
document.getElementById("header").style.backgroundImage = "url(images/new-header.jpg)";
It's a style attribute you're changing, so you need .style and then you use the CSS attribute name, but remove hyphens and camelCase the attribute name, so .backgroundImage.

Can you try this
var element = document.getElementById('content');
element.style.backgroundImage = "url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzOpUTzDIq2yutn75PQTLcHhJ06MTZPsV_V-0M918xKUhAqMxE')";
<div>
<p>this is unchanged</p>
<p id="content">backgroud wiil be cange</p>
<div>

Related

How can I get link text from CSS to string object?

I have HTML tag with link in background style and I want this link to be a string in my JS file. How can I do that?
<div class="bmlistt" style="background: url('b.ppy.sh/thumb/845746.jpg';)"></div>
You can grab the it using this:
var bg = $("div.bmlistt").css('background');
bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
How about the following:
const imageElement = document.getElementsByClassName('bmlistt')[0];
let image = imageElement.style.background.replace('url("', '').replace('")', '');
console.log(image);
<div class="bmlistt" style="background: url(b.ppy.sh/thumb/845746.jpg)"></div> <!-- Fix ";" in style attribute -->
No need for big libraries. querySelector to get the div. I would use its style.background or style.backgroundImage property. The latter of those only contains the image itself, and not any other background css you might specify in a real life scenario, possibly making it easier to extract the url.
Unfortunately with your specific HTML that doesn't work, because of an error in the CSS (the semicolon). So in that case you have to parse the style attribute as text, rather than relying on the style object property, which contains the browser's interpretation of your CSS. Both solutions are shown below.
var theDiv = document.querySelector('.bmlistt');
console.log(theDiv.style);
// Doesn't work because of error in the CSS. Otherwize this would do it.
var css = theDiv.style.backgroundImage;
console.log(css.substr(5, css.length - 7));
var attr = theDiv.getAttribute('style');
// This, if you know the length of the 'overhead' around the url, or
// a regular expression.
console.log(attr.substr(17, attr.length - 20));
<div class="bmlistt" style="background: url('b.ppy.sh/thumb/845746.jpg')"></div>

How to change CSS file or hide <link> tag

I want to change the design of my site by changing the CSS file attached. I have tried with script when the link is with id "link"
var x = document.getElementByID ("link")
X.href = style2
It didn't work.
The other thing I tried was to hide the <link> tag which had class "linkclass"
<style>
link.linkclass {
visibility:hidden;
}
</style>
But it didn't work either.
Can someone help.
Sorry if the code is bad formatted but I can't get how to format code in stack overflow
Three things wrong with this:
javascript is case sensitive. That means X is a different variable than x
style2 is not a valid URL. You have to use an URL to an existing .css file
<link> is not a visible element. Hiding an element that isn't visible in the first place accomplishes nothing.
This works:
var x = document.getElementByID("link");
x.href = "http://url/to/your/style2.css";
// ^ notice the lowercase x
If you wanna hide element (I got that impression from your examples), your javascript code should look like this:
var x = document.getElementById("link");
x.style.display = 'none';
Also take care with following:
-uppercase letters getElementbyId
-you're missing semicolon (;) after first expression
-your variable "x" is uppercase in second row("X").
In most cases this should be enough to disable element with CSS, just add this class (linkclass) to element which you want to hide:
<style>
.linkclass {
display: none;
}
</style>
You could do
$("#link").disabled = true;
This may also work.
document.getElementByID("link").disabled = true;
There is also another Stack question that addresses this here. Removing or Replacing a Stykesheet
update
You say you are trying to change the stylesheet. You could create a function to do it like this.
function styleSheetSwitcher( newFile ){
$("#link").prop("href", newFile);
}
styleSheetSwitcher("myNewCss.css");

How to get the default colors of a link?

I need some JavaScript to find the default link color of a page. How do I do it? I looked around but not sure how to do it. I believe jQuery has a .css function I can use but how about regular JavaScript?
Please note I don't have any specific element to target to grab css from, i.e. I can't look for the a color value for #myID -- I need to find the default a color value for the links on the page.
Thanks!
Try: Just place an <a> at the top of your page. This will get the values from the first <a> element.
Without any pseudo elements
window.getComputedStyle(document.body.getElementsByTagName('a')[0], null).getPropertyValue("color");
active
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':active').getPropertyValue("color");
hover
window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':hover').getPropertyValue("color");
If you have any fears, just go with:
var el = document.createElement('a'); // Creates <a>
document.body.appendChild(el);
var COLOR = window.getComputedStyle(el).getPropertyValue("color");
document.body.removeChild(el);
You can create an element and add it to html, then get the CSS properties of the element that is assigned by default. Example:
var element = document.createElement('a');
document.documentElement.appendChild(element);
var color = getComputedStyle(element).color;
console.log(color) //rgb(0, 119, 204) stackoverflow default link color
Try this on StackOverflow page, opening the console.
Demo

How can I change a button background with javascript?

I have a button having the following CSS background rule applied:
background-image:url('/images/button_1_normal.png');
I would like to change the button's background with JavaScript. I tried the following but it didn't work.
document.getElementById(step2).style.backgroundImage = "url('images/button_1_active.png') no-repeat";
What is the problem? Thank you
no-repeat is invalid. Only the URL part is a valid value for the background image property.
Either remove that or change your assignment to background:
document.getElementById(step2)
.style.background="url('images/button_1_active.png') no-repeat";
I think you are wanting something like this. The first image, set by css, is repeated, as no other order is given. But when changed using javascript, you also want "no-repeat"
CSS
#button {
background-image: url('http://imageshack.us/a/img856/3817/ticklf.png');
}
HTML
<button id="button">Button</div>
Javascript
setTimeout(function () {
var button = document.getElementById("button");
button.style.backgroundImage = "url('http://imageshack.us/a/img822/1917/crossn.png')";
button.style.backgroundRepeat = "no-repeat";
}, 2000);
On jsfiddle
Check this out. This is a working sample code. Check your image path. My images folder is in the same level as my javascript file.
const actionButton = document.getElementById('action');
actionButton.style.backgroundImage = "url('./images/icon_playback.png')";
<button id="action"></button>
You set the element id to a variable, add quotes to fix the problem:
document.getElementById('step2').style.backgroundImage = "url('images/button_1_active.png') no-repeat";
JS takes only strings inside quotes as text input.
Try this:
document.getElementById("step2").style = 'background-image: none; background-color:#3d8ed4;';

Changing the href attribute on checked

I'm working on a web page that contains a radio buttons group.
When one of these buttons get checked I need to change the href attribute of a link element (use different CSS file), How can I do that using Java script and html?
I tried getElementById() but the innerHtml attribute doesn't help, do you have any simple solution?
This should work:
document.getElementById('myStylesheet').href = 'http://example.com/new/href/link';
var input = document.getElementById("inputid");
if (input.checked){
var aElem = document.getElementById("aid");
aElem.href = "newurl";
}

Categories