I'm trying to add classes to different div, but I don't know why it doesn't work when I had created the class in the . sass file, and after that add using className, setAttribute or classList. But, when I do it in the same .ts file, works perfectly.
work
const tamano = 75;
const customMarker: HTMLElement = document.createElement('div');
customMarker.style.backgroundImage = `url(${this.greenShip})`;
customMarker.style.width = `${ tamano }px`
customMarker.style.height = `${ tamano }px`
customMarker.style.backgroundSize = '100%';
customMarker.style.cursor = 'pointer'
Doesn't work
const customMarker: HTMLElement = document.createElement('div');
customMarker.setAttribute('id', 'id_ship-on-time');
customMarker.setAttribute('class', 'ship-on-time');
console.log(customMarker.outerHTML);
customMarker.className = "ship-on-time";
class
.ship-on-time
background-image: url('../../../../../assets/icons/ship_green#3x.png')
background-size: contain
width: 70px
height: 70px
cursor: pointer
background-repeat: no-repeat
The result in the console is that
Ensure that your CSS class has the proper syntax:
.ship-on-time {
background-image: url('../../../../../assets/icons/ship_green#3x.png');
background-size: contain;
width: 70px;
height: 70px;
cursor: pointer;
background-repeat: no-repeat;
}
First, write your class in your .sass file
.ship-on-time {
background-image: url('../../../../../assets/icons/ship_green#3x.png');
background-size: contain;
width: 70px;
height: 70px;
cursor: pointer;
background-repeat: no-repeat;
}
then, if you want to add this class using the DOM, you need to use classList
customMarker.classList.add("ship-on-time");
Related
I have a dom item like blow:
<div data-realindex="0" class="img-item-wrapper"><div class="img-item" style="margin-bottom:8px;display:;" data-a-b8815d2c=""><div aria-label="图片.图集.共undefined张" class="img-wrapper__4hevL img-container img-wrapper-radius-tl__FrE43" style="height: 0px; padding-bottom: 100%; border-radius: 9px 9px 0px 0px; background-repeat: no-repeat; background-image: url("http://mms1.baidu.com/it/u=690465849,3185922056&fm=253&app=138&f=JPEG?w=500&h=667"); background-size: cover; background-position: center center;"><!----><div><div><!----><div class="half-mask__bdYCX"></div><!----></div></div><!----><!----></div><!----><div><div class=""><div><!----></div><!----></div></div></div></div>
The item have nested child, and I need to get the background-image in the inner child's style string.
background-image: url:(htttpxxxxx)
Can I just for loop key values to get background-image directly?
You can achieve this by accessing the style attribute based on the class name and then access the required style property along with the value from it.
Live Demo :
const el = document.getElementsByClassName('img-container')[0]
const styles = el.getAttribute("style").split(';');
for(var i=0;i<styles.length;i++) {
eachStyle = styles[i].split(':');
if (eachStyle[0].trim() === 'background-image') {
console.log(styles[i].trim())
}
}
<div data-realindex="0" class="img-item-wrapper"><div class="img-item" style="margin-bottom:8px;display:;" data-a-b8815d2c=""><div aria-label="图片.图集.共undefined张" class="img-wrapper__4hevL img-container img-wrapper-radius-tl__FrE43" style="height: 0px; padding-bottom: 100%; border-radius: 9px 9px 0px 0px; background-repeat: no-repeat; background-image: url("http://mms1.baidu.com/it/u=690465849,3185922056&fm=253&app=138&f=JPEG?w=500&h=667"); background-size: cover; background-position: center center;"></div></div></div>
trying to set up random background images for my Jumbotron. Here is what I have so far.
function randomImage() {
var images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ",
"http://www.shunvmall.com/data/out/193/47120931-random-image.png",
"https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg"
];
var imgAmount = images.length
console.log(imgAmount);
var x = Math.floor(imgAmount * Math.random())
console.log(x);
document.getElementsByClassName('jumbotron')[0].style.background = "url(" + images[x] + ") no-repeat center center fixed";
}
window.onload = randomImage;
This works however on page load the styles defined in my css sheet seem to be overwritten?
.container .jumbotron {
background: url(/static/images/banner-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
border-radius: 0px;
}
Is there a way to load these random images and keep the other styles already defined?
Also, another quick question.. I used getElementsByClassName[0] only because I couldn't get querySelector to work. How would I have written this with querySelector?
Changing the style.background property using JavaScript resets all the background properties (including background-size as well). You might only want to alter the backgroundImage property using JavaScript to keep the other background styles defined in your CSS.
document.querySelector('.jumbotron').style.backgroundImage = 'url(...)';
function randomImage() {
var images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ",
"http://www.shunvmall.com/data/out/193/47120931-random-image.png",
"https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg"
];
var imgAmount = images.length;
var x = Math.floor(imgAmount * Math.random());
document.querySelector('.jumbotron').style.backgroundImage = "url(" + images[x] + ")";
}
window.onload = randomImage;
.container .jumbotron {
background: url(https://placehold.it/300x200) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
border-radius: 0px;
height: 200px;
border: 6px #000 solid;
}
<div class="container">
<div class="jumbotron">
</div>
</div>
I have looked at this so long that I'm confusing myself. I seem to be stuck and missing something. My code is basically supposed to have the default div background (gamebg), and when you click on one of the buttons, the background of the div they are in changes.
<style>
#gamebg {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg1 {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg2 {
background-color: #00b5d3;
background-image: url('background_button_2.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
</style>
<div id="gamebg">
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
</div>
Any suggestions for me?
IDs have a higher specificity than classes. In your case, #gamebg is overriding .gamebg1
It's also best not to put too much code in in-line JavaScript. Considering creating a function. Inside the function, you will use the attribute function to add a class, and the removeAttribute function to remove the id.
Now in onclick, you just need to call the function with the class you want to add inside the paramater.
Here is a solution for you
JavaScript
function addNewClass(className) {
var background = document.getElementById('gamebg');
background.attribute('class', className);
background.removeAttribute('gamebg');
}
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
Here is more information on specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
This is due to something called "specificity". In CSS, id's are more "specific" than a class, which is why the id's background-color property will always override the class' background-property, meaning the background-color property won't actually change while the classes bound to the node with that id will.
A good video about specificity here:
https://www.youtube.com/watch?v=fy07HYm-geM
How does one accomplish a hero-unit similar to this: http://tribalmedia.co.uk/
I'm curious more than anything as to how this was created. As far I can tell it's more than likely some JS that's applying a min-height percentage value to the class depending on browser height.
EDIT: Try resizing your browser height and you'll see the min-height property is being changed.
Any input would be greatly appreciated!
Just read the CSS:
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFF;
min-height: 618px;
position: relative;
}
Demo: http://jsfiddle.net/qwertynl/5a343/
it's just the css stuff.Following is the CSS used by the particular website.
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
min-height: 618px;
position: relative;
}
I was able to solve my question using this Javascript!
function resizeHero() {
var windowHeight = $(window).height(),
heroUnit = $(".hero-unit");
heroUnit.css({
minHeight: windowHeight
});
}
$(document).ready(function() {
resizeHero();
$(window).on("resize", resizeHero);
});
I wish to use JavaScript to apply the style given below to the body of the HTML or another div on mouseover. And reverse on mouseout. Both with a fade if possible?
Style:
.box-style_img2 {
background-image: url(img.png);
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
}
Thanks in advance.
P.S. Just beginning to learn Javascript.
It is always better to do things in CSS if you can avoid Javascript
Try using :hover property of css. For animation use transition property
<div class="box-style_img2">
</div>
.box-style_img2 {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
transition: all 1s ease;
}
.box-style_img2:hover {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #000000;
transition: all 1s ease;
}
Also you can check this fiddle
function on_mouseover(){
document.body.className += "your-class-to be applied";//for body
or
document.getElementById("div-id").className ="your-class-to be applied"
}
function on_mouseout(){
document.body.className += "your-initial-css-class";//for body
or
document.getElementById("div-id").className ="your-initial-css-class";
}
Your HTML:
<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div>
Or you can use addEventListener if you dont want to write javascript inline
document.getElementById('your-id').addEventListener("mouseover",on_mouseover);
document.getElementById('your-id').addEventListener("mouseout",on_mouseout);
Note:This task can also be done using plain css also.
.your-class{
//properties to be applied on mouseout
}
.your-class:hover{
//properties to be applied on mouseover
}