Override background-color using `!important` [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 months ago.
Improve this question
How do I override class background color?
Tried !important but not working, the text is still yellow.
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
background-color: yellow ;
}
</style>
</head>
<body>
<p class="myclass" background-color="red !important">This is some text in a paragraph.</p>
</body>
</html>

if you want use inline styles (not good), you should use style attribute on html elements and in any way of using css you should use colon : instead of = for giving value to properties, try this snippet:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
background-color: yellow;
}
</style>
</head>
<body>
<p class="myclass" style="background-color:red !important;">This is some text in a paragraph.</p>
</body>
</html>

You need to put inline css in the style attribute like so:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
background-color: yellow ;
}
</style>
</head>
<body>
<p class="myclass" style="background-color: red !important;">This is some text in a paragraph.</p>
</body>
</html>

You need to mention style.
<p class="myclass" style="background-color:red !important;">This is some text in a paragraph.</p>

Related

Displaying dynamic number of objects on an HTML page [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<title>my site</title>
<script>
// javascript code here
// generates a random number, X, from 1 to 10 each time this page is requested
// displays X number of "blue-object"
</script>
<style>
/*css if needed */
</style>
</head>
<body>
<div class = "blue-object" style="background:blue; margin:20px">This is an instance of a blue object</div>
<div class = "blue-object" style="background:blue; margin:20px">This is an instance of a blue object</div>
</body>
</html>
So currently the page above is static. It always display 2 objects of the "blue-object" class.
I need to make it dynamic. So for the sake of simplicity, the number these objects that gets displayed is a randomly generated number. So how can that be done?
Here you go :
<!DOCTYPE html>
<html>
<head>
<title>my site</title>
<style>
div{
background-color:blue;
margin:20px;
}
</style>
</head>
<body id="main">
<script>
var desiredText="Hey there! change me ;)";
//You can just change the variable to your desired text and that's it :)
var randomRepeater=function(desiredText){
var iterator=Math.floor(Math.random() * 10);
console.log("will create "+iterator+" divs this time :) ");
for(var i=0;i<iterator;i++){
var div = document.createElement("div");
div.innerHTML = desiredText.toString();
document.getElementById("main").appendChild(div);
}
}
randomRepeater(desiredText);
</script>
</body>
</html>

Div style according to the place of CSS [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<style>
#aDiv{
width:300px;
height:100px;
background-color:blue;
}
</style>
<!--link rel="stylesheet" href="style.css"-->
</head>
<body>
<div id="aDiv"></div>
</body>
If I launch the html in the above form, the blue rectangle is displayed.
If I saved the style in a css file (respectively style.css) the rectangle is not displayed. This behaviour is valid for all the browsers I tried (Firefox, IE, Chrome). How to solve this problem ?
If what you posted in the comments is the actualy contents of your style.css file, your problem is simple to solve - you have a typo:
#aDiv { width:300px; height:l00px; background-color:blue; }
It should be this (take a look at the height value - you had a lower-case L in there in place of a 1):
#aDiv { width:300px; height:100px; background-color:blue; }
This results in an element of height: 0 to render, which you won't be able to see.
When testing this, remember to un-comment the link line in your html head.

How to show html result form a texterea [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In a page of my web, I have a textarea to write html code. How to show this html result of this textarea into a other view under this texterea.
You are looking for a WYSIWYG for angular:
Angular WYSIWYG directive
textangular
angular-redactor
angular-froala
List provided here as well: http://ngmodules.org/tags/wysiwyg
<html>
<head>
<meta name="description" content="quick edit panel" />
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<div class="prompt" contentEditable=true
style="padding:5px;
background-color:black;
height:28px;
color:white;
font-family:'courier new'">
write a html code <span style="background-color:blue;">here</span>
</div>
<div class="result">
write a html code <span style="background-color:blue;">here</span>
</div>
<script type="text/javascript">
$('.prompt').focus();
$('.prompt').keypress(function(event){
if ( event.which == 13 ) {
var resultado = $('.prompt').html();
console.log(resultado);
$('.result').append($('<div/>').html(resultado).text()+"<br>");
$('.prompt').html('');
$('.prompt').focus();
}
});
</script>
</body>
</html>

Simplest angularjs page not working [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am watching a video to learn angularjs. I used CDN link for including angularJs
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"/>
</head>
<body ng-init="names=['shan', 'amit', 'vaibhav']">
<ul>
<li ng-repeat="pname in names">
{{pname}}
</li>
</ul>
</body>
</html>
I have no other file. That's the simplest piece of code I have and on browser I see blank page. What's wrong in this?
Put an ng-app attribute on the html tag:
<html ng-app>
And close your script tag (it's not self-closing)
http://jsfiddle.net/g02ket0t/
Fix the script line:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
You can also use data-ng-, instead of ng-, if you want to make your page HTML valid.
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
</head>
<body>
<div data-ng-init="names=['shan', 'amit', 'vaibhav']">
<ul>
<li data-ng-repeat="pname in names">{{pname}}</li>
</ul>
</div>
</body>
</html>
You're missing the closing tag. Also add the ng-app attribute in the html tag to link to your app.
Complete Script tag
Use ng-app attribute.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app ng-init="names=['shan', 'amit', 'vaibhav']">
<ul>
<li ng-repeat="pname in names">
{{pname}}
</li>
</ul>
</body>
</html>

Why does this simple code not work in JSfiddle? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I did this in JSfiddle:
http://jsfiddle.net/jocelynwang205/qSjn6/
It is supposed to turn a paragraph black, but it seems that the function cannot be called. It does not work on a real webpage either.
Later I added my JavaScript to the html in JSfiddle, like this:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
</script>
<p id="para1">
This is a paragraph to be changed.
</p>
Turn black.
And it worked: http://jsfiddle.net/jocelynwang205/qSjn6/1/
So I want to know why. Thanks in advance.
the original doesnt work because you have onlick instead of onclick, and do not have the code running in the head but in a onload function (settings are on the left side) causing the function to be invisible to the onclick attr
JSFiddle defaults to the javascript being run in a onLoad function so basically your code was being run like below:
<script>
window.onload = function(){
function changeA(){
document.getElementById('para1').style.color ='black';
}
};
<script>
which makes the function changeA invisible to the html onclick attribute
changing the setting to "no wrap - in head" makes it run like:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
<script>
which now makes it visible to the html
Below is a screenshot of where the setting is:
in the jsfiddle you specified onlick instead of onClick.
Turn black.
change it to
Turn black.
in the link, and set option No wrap in from left hand side of jsfiddle.
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#para1
{
color: red;
font-weight: bold;
}
</style>
<script type="text/javascript">
function changeA()
{
document.getElementById('para1').style.color ='black';
}
</script>
</head>
<body>
<p id="para1">This is a paragraph to be changed.</p>
Turn black.
</body>
</html>
Try this.

Categories

Resources