Menu
Community /Pin to ProfileBookmark
@cootheadJun 26.2019 — #Hi there RaulRogojan,
try it like this...
_coothead_@cootheadJun 26.2019 — #
Here is my test code, which show that it works correctly...
@cootheadJun 26.2019 — #Hi there RaulRogojan,
now that I have answered your question, I will show you a method which
is preferable because it removes the inline styling from the JavaScript...
_coothead_@cootheadJun 26.2019 — #Hi there RaulRogojan,
does this help...
**Javascript :-**
_coothead_
Adding multiple styles with SavaScript
I have this code that adds 0.4 opacity to an clicked element, but I want do add a border also. How I can do it? I also want the border to be on the inside.
[code]
const opacity = 0.4;
this.style.opacity = opacity;
Sign in
to post a comment10 Comments(s) ↴
0
@cootheadJun 26.2019 — #Hi there RaulRogojan,try it like this...
``<i>
</i> this.style.opacity = opacity;
this.style.border = '1px solid #000';
this.style.boxSizing = 'border-box'; <i>
</i>``_coothead_
0
@cootheadJun 26.2019 — #>@RaulRogojan#1605413
> **[color=#069] It's still on the out side...[/color] **
Here is my test code, which show that it works correctly...
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen" -->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#test {
display: block;
max-width: 30em;
height: auto;
margin: auto;
}
</style>
</head>
<body>
<img id="test" src="https://coothead.co.uk/images/blood.jpg" width="768" height="512" alt="blood">
<script>
(function( d ) {
'use strict';
d.getElementById( 'test' ).addEventListener( 'click',
function() {
this.style.opacity = 0.4;
this.style.border = '1px solid #000';
this.style.boxSizing = 'border-box';
}, false );
}( document ));
</script>
</body>
</html><i>
</i>`</CODE>
<EM>_coothead_</EM>
<CODE>``
0
@cootheadJun 26.2019 — #Hi there RaulRogojan,now that I have answered your question, I will show you a method which
is preferable because it removes the inline styling from the JavaScript...
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen" -->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#test {
display: block;
max-width: 30em;
height: auto;
margin: auto;
box-sizing: border-box;
}
.extras {
opacity: 0.4;
border: 1px solid #000;
}
</style>
</head>
<body>
<img id="test" src="https://coothead.co.uk/images/blood.jpg" width="768" height="512" alt="blood">
<script>
(function( d ) {
'use strict';
var test = true;
d.getElementById( 'test' ).addEventListener( 'click',
function() {
if ( test === true ) {
this.classList.add( 'extras' );
test = false;
}
else {
this.classList.remove( 'extras' );
test = true;
}
}, false );
}( document ));
</script>
</body>
</html><i>
</i>``_coothead_
0
@cootheadJun 26.2019 — #Hi there RaulRogojan,does this help...
**Javascript :-**
``<i>
</i>
// Logos galery -----
const logosMain = document.querySelector('.logos__main');
const thumbs = document.querySelectorAll('.imgs img');
thumbs.forEach( img => img.addEventListener('click', imgClicked));
function imgClicked(e) {
if ( window.getComputedStyle(this).getPropertyValue('opacity') == 1 ) {
this.classList.add( 'extras' );
}
else {
this.classList.remove( 'extras' );
}
}<i>
</i>`</CODE>
<STRONG>**CSS :-**</STRONG>
<CODE>`<i>
</i>.imgs img {
display: block;
width: 150px;
height: auto;
}
.extras {
border: 5px solid #000;
opacity: 0.4;
}<i>
</i>``_coothead_