I have a below HTML file and when I manually move cursor on the dummy link, it shows me yellow color, as I have added that style on css hover.
Same I would like to simulate with java script.
Here below is the image for reference.
image
Please suggest me how to achieve it?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
dummylink
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
Use the mouseover and mouseout events:
const a = document.querySelector('a');
a.onmouseover = () => a.style.backgroundColor = 'yellow';
a.onmouseout = () => a.style.backgroundColor = null;
dummylink
Related
While working through the application process for a bootcamp, I was tasked with the following JS problem which is above my head. I was successful in testing through the JS console on Chrome but when I attempt to plug the code into the .js file, it does not work. Do I need to apply a boolean expression? If so, what is the best way of coding it?
Here is everything that is in the .js file:
document.addEventListener("DOMContentLoaded", function(event) {
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
// write here
});
});
Here is the problem that is at hand:
"To make the image bigger or smaller, you have to change its class. In your JavaScript console, run this code:
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.className; This displays what the class currently is; it
should be
"small", unless you changed it since.'
To make it big, you should remove the class, by running this:
thumbnailElement.className = ""; To make it small again, you can put it back:
thumbnailElement.className = "small";'
See how it changes from small to big? You should put the line that makes it big in your JavaScript file so that it executes when the user clicks."
You could use the HTMLElement.classList.toggle method to add or remove the class. Here is a small snippet that illustrates how you can do it.
<style>
.small {
transform: scale(0.5);
}
</style>
<button class="small" id="smart_thumbnail">Click me</button>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
// Get the element by id
var thumbnailElement = document.getElementById("smart_thumbnail");
// add the event listener on the element
thumbnailElement.addEventListener("click", function () {
thumbnailElement.classList.toggle("small");
/*
HTMLElement.classList.toggle(className) will remove the class if it is in the class list OR add it if it is not already there.
*/
});
});
</script>
If you simply want to remove it, you can use the remove method instead.
thumbnailElement.classList.remove("small");
if you have the css of the elment in the id and changing its size by class then it will not work here is the code that I wrote to solve
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Answer</title>
<style>
.small{
width: 10%;
height: 10%;
transition: all 1s ease;
}
.notSmall{
width: 30%;
height: 30%;
transition: all 1s ease;
}
</style>
</head>
<body>
<img src="Your Image" class="small" id="smart_thumbnail" alt="The image">
<script>
document.addEventListener("DOMContentLoaded", () => {
let thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
if(thumbnailElement.classList == "small"){
thumbnailElement.classList.remove('small');
thumbnailElement.classList.add('notSmall');
console.log('now image is big')
}else{
thumbnailElement.classList.add('small');
thumbnailElement.classList.remove('notSmall');
console.log('now image is small')
}
});
});
</script>
</body>
</html>
How can I execute the following js function inside js instead of using a button with it? Also, can it be achieved without jQuery?
The function is myFunction()
The button is:
<button onclick="myFunction()">Toggle dark mode</button>
The full code is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>
<button onclick="myFunction()">Toggle dark mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
Also, instead of using a button, use a span with a css pointer settle.
So basically I'm trying to achieve something like this:
HTML:
<span id="mybutton">Toggle nightmode</span>
JS:
<script>
function myFunction.getElementbyID(#mybutton).(click) {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
It's ok if you offer a solution in jQuery, but I prefer vanilla javascript.
There are quite a few ways to achieve this, the shortest way would just be to do:
document.getElementById('mybutton').onclick = () => { /* CODE GOES HERE */ };
If your function is already defined somewhere, you can replace the lambda function (This ()=>{} thingy) with the name of your function, leaving you with this:
document.getElementById('mybutton').onclick = myFunction;
However, all that does is set the onlcick property of your element programatically, rather than setting it inline. If you want your element to not have the onclick property at all, you need to set an event listener for that element. This can be done like so:
document.getElementById('mybutton').addEventListener('click', () => {
/* CODE GOES HERE */
});
Once again, that lambda function can be swapped out for the name of your function if its already defined somewhere else.
tldr your script element should look like:
<script>
document.getElementById('mybutton').addEventListener('click', () => {
var element = document.body;
element.classList.toggle("dark-mode");
});
</script>
I have a very simple site similar to this jsfiddle. Everything seems to work fine but on my local one, but when I stop at the first JS line (before the custom elements are declared) I can see the div with no formatting...
<jrg-test>
<div slot="test">
This should work
</div>
</jrg-test>
connectedCallback() {
console.log("Ok we are working")
this.shadowRoot.innerHTML = "<slot name='test'></slot>"
const element = document.createElement('style');
element.textContent = "::slotted(*){background-color:red;color:white;}";
this.shadowRoot.appendChild(element);
}
So basically if I stop before the custom element is rendered I see the raw div. I know there are some hacky solutions involving positioning and CSS but is there a cleaner solution. Possibly one I can implement exclusively in JS?
So the main question is how can I hide the This should work text until the red background and white color have been applied?
Maybe you could try to use the :defined CSS pseudo-class to hide the custom element while it's defined.
See the example below:
class TestElement extends HTMLElement{
constructor(){
super();
console.log("Attaching the shadow")
this.attachShadow({mode:'open'})
}
connectedCallback() {
console.log("Ok we are working")
this.shadowRoot.innerHTML = `<style>
::slotted(*){background-color:red;color:white;}
</style>
<slot name='test'></slot>`
}
}
upgrade.onclick = () => customElements.define("jrg-test", TestElement)
jrg-test:not(:defined) {
display:none
}
<jrg-test>
<div slot="test">This should work</div>
</jrg-test>
<button id="upgrade">upgrade</button>
You can hide all not defined customElements with adding to global styles
<style>
*:not(:defined) { display:none }
</style>
For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> *:not(:defined) { display:none } </style>
<script type="module" src="./index.js"></script>
</head>
<body>
<test-tag>
This content will be visible only after "test-tag" is defined
</test-tag>
</body>
</html>
I want to change the css properties of many html objects (but in this example I only took body to simplify. My goal is to display dark mode if the current mode is light, or display light mode if current mode is dark.
My javascript function does not work.
debug.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="debug.css">
<script src="darkmode.js"></script>
</head>
<body id="bodyElem" class="my-body light-mode">
<h1>Settings</h1>
<p>Dark mode:</p>
<button type="button" onclick="invertMode()">click</button>
</body>
</html>
debug.css:
.my-body.light-mode{
background-color: yellow;
}
.my-body.dark-mode{
background-color: black;
}
darkmode.js:
function invertMode() {
var body = document.getElementById("bodyElem");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
You will need to add an ID for the <body> tag to be able to find it using your code.
<body id="bodyElem" class="light-mode">
and access it using:
var body = document.getElementById("bodyElem");
If you need to access mutiple elements, you can use their CSS class name like:
document.getElementsByClassName("CLASSNAMEHERE");
then loop them all to apply the changes you need.
you will be using .classList.remove("CLASSNAME") to remove single class and .classList.add("CLASSNAME") to add single class to DOM element
Here is a complete sample fiddle:
https://jsfiddle.net/j3o8Lt5k/1/
I would like to change the style of another inside a html element using javascript.
I have used the below code to change the current html element.
<p onmouseover="this.style.color = 'black;">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
I would like to change the other element's style inside the p tag using javascript.
can anyone help?
Using CSS you can achieve the same
<style>
p:hover + h1 {
background-color : red
}
</style>
This should be what you're after (not my work) - check out the fiddle link ...
<html>
<body>
<span id="div1" style="color:black;" onmouseover="stext()" onmouseout="htext()">TEXT1</span><p />
<hr color="black" />
<span id="div2" style="color:red;" onmouseover="htext()" onmouseout="stext()">Text2</span>
</body>
http://jsfiddle.net/FFCFy/16/
for example if you want to change the color:
<script>
document.getElementByTagName("p").style.color = "blue";
</script>
that should probably bound to an event, accordingly to what you want to do
use this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="color:red;" onmouseover="ch(event)">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
<script>
function ch(e) {
e.target.style.color = "black";
alert();
}
</script>
</body>
</html>
use with Javascript
function change(that){
document.getElementsByTagName('h1')[0].style.color="red";
}
<p onmouseover="change()">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
use with css
p:hover + h1{
color:red;
}
<p >This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
jQuery("p").mouseover(function(){
jQuery("h1").css("color", "yellow");
});
You can easily achieve it with jQuery:
$(function() {
$('#a-element').hover(function() {
$('#b-element').css('background-color', 'yellow');
}, function() {
// on mouseout, reset the background colour
$('#b-element').css('background-color', '');
});
});
If #b comes immediately after #a, the simplest solution is in pure css:
#a:hover + #b {
background: #ccc
}
If between #a and #b are other elements, you have to use ~ like this:
#a:hover ~ #b {
background: #ccc
}