I don't understand why .attr() will not change the background-color of div "outline" to red.
HTML CODE:
<div id="outline"></div>
CSS CODE:
#outline {
height: 300px;
width: 300px;
background-color: black;
}
JAVASCRIPT (JQUERY) CODE:
$("#outline").attr('background-color', 'blue');
background-color isn't a html attribute, it's a style attribute - use css function instead.
$("#outline").css('background-color', 'blue');
#outline {
height: 300px;
width: 300px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outline"></div>
// To set the html style attribute, use .css()
// .css() is dedicated to set one or more
// styles at a time
$("#outline").css('background-color','blue');
// This is equivalent to the above
// .attr() is dedicated to set one or more html
// attributes at a time
$("#outline").attr('style', 'background-color:blue');
#outline {
height: 300px;
width: 300px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outline"></div>
background-color isn't an attribute, it's a css property.
Use :
$("#outline").css('backgroundColor', 'blue');
Related
In the example below, I want to change pad's color via JS to green, but also make it transition to yellow when it is active.
However, changing the color via JS like this: pad.style.background = 'green' will make the transition stop working. If I remove this line, the transition will work fine.
Why is that so and how can I fix this?
let pad = document.getElementsByClassName('pad')[0]
pad.style.background = 'green'
.pad{
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
<!DOCTYPE HTML>
<body>
<div class="pad"></div>
</body>
The reason for not working is because pad.style.background will add an inline css style which has a priority over a css class
Solution:
use a class instead of inline style like in the code bellow:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add("green");
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad.green {
background: green;
}
.pad:active {
background: yellow;
}
<div class="pad"></div>
It seems like JS is adding green to the :active state too.
Add !important to the active style in your css to make it more of a priority:
.pad:active {
background: yellow!important;
}
This is happening because you're overriding the existing style by applying the style via style attribute on the HTML element.
Instead you should create a new class and apply that using JavaScript, in that case the original styles won't be overidden and the transition would still work
Have your CSS as:
.pad {
width: 80px;
height: 80px;
background: black;
transition: background .5s;
}
.pad:active {
background: yellow;
}
.pad-green {
background: green;
}
And then in your JavaScript, do this:
let pad = document.getElementsByClassName('pad')[0]
pad.classList.add('pad-green')
Hope that helps, let me know in the comments if there are any questions.
I'm trying to learn javascript on my own, so I'm lacking a lot. I'm trying to change the color of multiples elements depending on the color in the css of another element.
I want the javascript to detect the <div id> with a specific color, and then change the id of another <div id2>
I tried this :
if (document.getElementById("name").css('color') == "#7a5cd4") {
document.getElementById('border').setAttribute('id', 'red');
document.getElementById('line').setAttribute('id', 'linered');
}
#name {
font-size: 35px;
color: #7a5cd4;
}
#border {
width: 25px;
height: 25px;
border: 3px solid black;
padding: 10px;
margin: 10px;
border-radius: 100%
}
#red {
width: 25px;
height: 25px;
border: 3px solid red;
padding: 10px;
margin: 10px;
border-radius: 100%
}
#line {
width: 200px;
height: 20px;
border: 1px solid black
}
#linered {
width: 200px;
height: 20px;
border: 1px solid red
}
<center>
<div id="name">name</div>
<div id="border"></div>
<div id="line"></div>
</center>
window.getComputedStyle is a function that takes an element as a parameter and returns an object containing all of the styles that are being used on that object. We can then call getPropertyValue on the result to get the value of a css property.
These functions return colours in the form rgb(r, g, b), so we will need to compare the value to rgb(122, 92, 212), instead of #7a5cd4.
HTMLElement.style, however, would not work in your case as it only gets the inline style, which is when you specify the style in your html, like <div style="color: red">.
Also, it is recommended to use classes for selecting elements, instead of ids, as you can place multiple of them on the same element.
const element = document.getElementById('name');
const styles = window.getComputedStyle(element);
if (styles.getPropertyValue('color') == 'rgb(122, 92, 212)') {
document.getElementById('border').setAttribute('id', 'red');
document.getElementById('line').setAttribute('id', 'linered');
}
In order to change the id of element you:
document.getElementById('oldid').id = 'newid'
This rest of this answer fit to inline style (element style="color: value") while #BenjaminDavies answer fit more to your original question:
In order to check/change color property you:
var divOldColor = document.getElementById('oldid').style.color; // get the color to variable
if (divOldColor == '#7a5cd4') { // do something }
Put it all together we get something like this:
if (document.getElementById('name').style.color == '#7a5cd4') {
document.getElementById('border').id = 'red';
document.getElementById('line').id = 'linered';
}
.css() is not a vanilla JS function. Use .style.cssPropertyName instead.
if (document.getElementById("name").style.color === "#7a5cd4") {
document.getElementById('border').setAttribute('id', 'red');
document.getElementById('line').setAttribute('id', 'linered');
}
<style>
#window1 {
width: 100%;
border: solid;
border-style: solid;
border-color: black;
}
#window1 object {
width: 100%;
}
</style>
<script>
function load() {
document.getElementById("window1").innerHTML='<object
width="100%" type="text/html" data="http://www.example.com"></object>';
}
</script>
What I'm trying to do is relaod the page www.example.com in a certain width, but I can't modify the width of the page www.example.com with CSS. The reference in w3schools says that I need to add width inside the tag. But what I wanted is to set the width using CSS.
you should use style attribute as
document.getElementById("window1").innerHTML='<object
style="width:100%" type="text/html" data="http://www.example.com"></object>'
I'm using two iframe tag in my website.
I added css for 1 tag
<style>
iframe{
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 300px;
left: 200px;
height: 300px;
width: 250px;
filter:alpha(opacity=0);
}
</style>
But both iframes are hidden.
I want to show 1 iframe and hide another one. How can I do that?
You can use IDs for this if you have a simple page and don't have too many styles to maintain. Below the style tags are the iframes with ID attributes defined. Those ID attributes are used between the style tags to select the iframe element you want to style by ID.
<style>
/* Using ID selector #iframeOne */
#iframeOne {
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 300px;
left: 200px;
height: 300px;
width: 250px;
filter:alpha(opacity=0);
}
</style>
<!-- Give ID to iframe you want to style. Here it's iframeOne -->
<iframe id="iframeOne"></iframe>
<iframe id="iframeTwo"></iframe>
Try these selectors:
iframe:first-child{
// styling
}
iframe:last-child{
// styling
}
iframe:nth-child(1){
// styling
}
You should add ID or Class in your <iframe> tag like below code:
Add ID:
<iframe id="iframe-1"></iframe>
<iframe id="iframe-2"></iframe>
or
Add Class:
<iframe class="iframe-1"></iframe>
<iframe class="iframe-2"></iframe>
Below CSS:
<style>
#iframe-1,
.iframe-1 {
/* Your code here */
}
#iframe-2,
.iframe-2 {
/* Your code here */
}
</style>
The best way is to give the one you wish to hide an id or a class and then let the css be applied to the id (#your_id) or the class (.your_class). So instead of writing iframe{.... you would write #your_id{... or .your_class{....
In my document I've got several divs with ID beginning with letter "p" and then any number. I'd like to find them all using jQuery regular expression pattern and then add class to them. Can you help me fix this snippet? Thanks.
$(function(){
var pattern = "#p\d+";
$(pattern).addClass(".red");
});
div {
width: 100px;
height: 100px;
margin: 20px;
background: green;
}
.red {background: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p27"></div>
<div id="p46"></div>
<div id="p124"></div>
Sure, you can use the filter method to apply any specific logic you need:
$(function(){
$("div")
.filter(function() { return /^p\d+$/.test(this.id); })
.addClass("red");
});
div {
width: 100px;
height: 100px;
margin: 20px;
background: green;
}
.red {background: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p27"></div>
<div id="nomatch"></div>
<div id="p124"></div>
You could try
$("div").filter(function(i,e){return e.match(/^p\d+$/)!=null;}).addClass("red")
It basically finds all divs, then filters out those that don't match the regular expression and adds the class to the remaining tags. (I have not tested this code.)
You can add classes this way:
$("div[id^='p']").addClass(".red");