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
Related
html file
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background-color: blue;
}
</style>
</head>
<body>
<script src="test.js"></script>
<div id="dd" class="div1" onmouseover="mousecolor()" onmouseout="this.style.backgroundColor=null">
<p>hep</p>
</div>
</body>
</html>
javascript file
function mousecolor() {
console.log("hhhhhhh")
document.getElementById("dd").style.BackgroundColor = "000080"
}
function mouseout() {}
the console does seem to be working when i hover over the text, but the background color doesn't change
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
background-color: blue;
}
</style>
</head>
<body>
<div id="dd" class="div1" onmouseover="mousecolor()"
onmouseout="this.style.backgroundColor=null">
<p>hep</p>
</div>
<script src="test.js"></script>
</body>
</html>
JavaScript
function mousecolor() {
console.log("hhhhhhh");
document.getElementById("dd").style.backgroundColor = "#fcba03";
}
Used the color #fcba03 and changed BackgroundColor to backgroundColor. Worked for me
The code as given does work apart from the need to change BackgroundColor to backgroundColor in the JavaScript assignment to style.
On moving the mouse over the color changes from a bright blue to a dark (navy) blue.
Note that the mouseout action is rather strange - null is not a color. Possibly it was meant that the color be set to transparent:
onmouseout="this.style.backgroundColor='transparent';
Note the use of single quotes around the string that is the color (in this case transparent).
I am trying to print an h3 that has an id of question, but it won't work.
function questions() {
var question = document.getElementById("question");
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
As you can see, the result is fine until it reaches the JavaScript. How can I fix this? I know document.write isn't the best thing to use to print stuff, but I am just testing something.
document.getElementById("question") returns a DOM object (as you saw) and you want to access the HTML within it, so use the innerHTML property to get it with document.getElementById("question").innerHTML. So technically there's nothing wrong with document.write; it's doing its job. You're just not selecting the content of the element.
function questions() {
var question = document.getElementById("question").innerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
question is an object of type HTMLHeadingElement. You are writing the string representation of that object, which is [object HTMLHeadingElement].
You are either interested in the raw HTML used to generate that element (question.outerHTML) or its contents (question.innerHTML).
Try waiting for dom content to load by placing your script in here:
document.addEventListener("DOMContentLoaded", function() {
// code...
});
Set question with innerHTML
var question = document.getElementById("question").innerHTML;
Also, dont nest the tags, use a span instead:
<h3>What is<span id="question">1+1?</span></h3>
You are trying to write an HTMLheading object into the page.
Use the .outerHTML property for this to work.
function questions() {
var question = document.getElementById("question").outerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
Couldn't find proper solution in old questions, so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>
everything except code inside <style> and <script> tags indented ok, how can I fix it?
As it turns out: That this has been done on purpose! Even my current Vim 8.1 installation contains an indent/html.vim-file which has such zero-indentation as its default setting.
That is however configurable via vimrc with:
let g:html_indent_script1 = "inc"
let g:html_indent_style1 = "inc"
...and -shame on us- is also mentioned in :help html-indent
I use othree/html5.vim plugin which supports css/javascript inside html. It works although this isn't probably the simplest solution.
Your code is indented like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>
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>
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!!!