I'm trying to set background color to blue using javascript ran with Sublime Text 3. What command should I be using. Thank you
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<backgroundColor="blue>;
</backgroundColor="blue">
</body>
</html>
<style> tag is used to declare CSS properties in the same HTML document.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.blueDiv
{
background-color: blue;
}
</style>
</head>
<body>
<div class="blueDiv">
Background color of this div is blue.
</div>
</body>
</html>
You can use inline style with div to set background color:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.bg-blue{background-color:blue;}
</style>
</head>
<body>
<div class="bg-blue">
</div>
</body>
</html>
Thank you guys, until now I tried this - in vain:
<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>DropDown</title>
<script language="javascript">
fuction()
$("select").change(function() {
$(this).css("background-color", ($(this).attr("data-correctVal") ==
$(this).val()) ? "green" : "red");
});
</script>
</head>
<body>
<select name="Armaturen">
<option value="1">Ölvorwärmung</option>
<option value="2">Kesselthermostat</option>
<option value="3">Ölpumpe</option>
<option></option>
</select>
</body>
</html>
Now I will try yours - patience please ... and thanks a lot!!!
Related
I am trying to make a simple shareable text editor with Mozilla's TogetherJS, but it does not seem to work. Based on their instructions, I added the library/script in the head and calling the JS from the button.
https://togetherjs.com/
In the Head tag:
<script src="https://togetherjs.com/togetherjs-min.js"></script>
In the body:
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<div>
<textarea style="border:1px solid red; height:300px; width: 500px; font-size: 16px;">
</textarea>
</div>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>
It seems to super-simple, yet for some reason, it does not seem to work!
Could you please check now wrap your script in the body i.e.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>
this is about HTML <object> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
<style>
#square { width:20px; height:20px; background-color: aqua;}
</style>
</head>
<body>
<div id="square"></div>
<object data="child.html" type="text/html" ></object>
</body>
</html>
and child.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button>red</button>
<button>blue</button>
<script>
document.querySelectorAll('button').forEach(bt=>{
bt.onclick=e=>{
console.log(e.target.textContent)
document.parentNode.getElementById('square').style.background = e.target.textContent
}
})
</script>
</body>
</html>
but I got this error :
TypeError: document.parentNode is null
so how to access to #square element from child.html in JS ?
Try this -
parent.document.getElementById('square').style.background = e.target.textContent
This is my code...
body
{
margin:0;
padding:0;
height:100vh;
}
#particles-js
{
height:100%;
background:#f00;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RESUME</title>
<link rel="stylesheet" href="p.css">
</head>
<body>
<div id="particles-js">
</div>
<script type="text/javascript" src="particles.js"</script>
<script type="text/javascript" src="app.js"</script>
</body>
</html>
I am beginner in javascript and jquery. I want to add particles in background of my webpage.I downloaded particles-js-master zip file from github and add particles.js and app.js in my html file. but it not working in any browser.did i wrong something? please help me out....thanks in advance :)
This question already has answers here:
How do you read CSS rule values with JavaScript?
(16 answers)
Closed 4 years ago.
Anyone can please tell me How can I get an internal stylesheet using jQuery. I know how to get the style of hello class but I want to take the style of world class.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.hello{
color: red;
}
.world{
color: blue;
}
</style>
</head>
<body>
<p class="hello">Hello world!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.hello{
color: red;
}
.world{
color: blue;
}
</style>
</head>
<body>
<p class="hello">Hello</p>
<p class="world">world!</p>
</body>
</html>
You define as .hello class but .world class is not declare how could it response both color in a one class attribute
Based on Jquery You refer this one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<title>Page Title</title>
</head>
<body>
<p class="hello">Hello world!</p>
</body>
</html>
<script>
$(document).ready(function(){
var n = $(".hello").length;
if (n < 2) {
$(".hello").css("color", "red");
$(".hello").css("background", "blue");
}
else {
$("body").css("color", "orange");
}
});
</script>
Check Below Link here
I am trying to apply a class on HTML tag, if the tag exists.
I have tried this code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style>
.black
{
background:#000;
color:white;
}
</style>
<script type="text/javascript">
$(window).load(function () {
$('textarea').addClass('black');
});
</script>
</head>
<body>
<div>
<textarea>content</textarea>
</div>
<script src="jquery.js"></script>
</body>
</html>
What I want: If the HTML body contains a textarea tag then the .black class will apply it automatically.
Try moving <script src="jquery.js"></script> before <script></script> containing call to $(window).load() for jQuery() to be defined when called
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style>
.black {
background: #000;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(window).load(function() {
$('textarea').addClass('black');
});
</script>
</head>
<body>
<div>
<textarea>content</textarea>
</div>
</body>
</html>
If you want to apply style to HTML tags create style with Tag names Link here
For your case
textarea
{
background:yellow;
color:red;
}
this shall apply to all the text area tag on the document.
here is a JSFiddle i created from your source
https://jsfiddle.net/sumeetkumar001/sxxkjbh2/
You don't need $(window).load(function () {});, simply leave this line:
$('textarea').addClass('black');
Here is demo.
$('textarea').addClass('black');
.black {
background:#000;
color:white;
}
<div>
<textarea>content</textarea>
</div>