Is it possible to add CSS selector inside the body section? Here is my code for example (but it doesn't work):
<html>
<head>
</head>
<body>
<div style= "a[target=_blank] {background-color: yellow;}"> **css selector on this section
test
test1
test2
</div>
</body>
</html>
No, you can not use selectors inside inline style. the inline style will effect only on element that style tag located in.
It seems to work fine when using css in a style sheet.
As far as I know inline styles only effect the element the style is on and so cannot be used to change another.
a[target=_blank] {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div>
test
test1
test2
</div>
</body>
</html>
Related
I have written this html script to display wikipedia inside iframe but i want to change the background color of it, below is the code snippet which i tried. but its not working.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue !important;
/* Adding !important will give this rule more precedence over inline style */
}
</style>
</head>
<body>
<iframe style="background-color:#fc3 !important;" src="https://www.wikipedia.org/" width="100%" height="450px" >
</iframe>
</body>
</html>
You cannot modify the contents of an iframe before loading (using CSS), because it is displaying content from another page. After it loads, you may modify it with javascript.
I am trying to add inline style to a div using jquery, following is the div as I inspect in firebug (attached below)
I want to keep the existing CSS as well, I just have to add margin-left:0 and margin-right:0 to the existing class, following jquery I've tried but no luck:
jQuery(document).ready(function($){
$(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});
});
What are the other way to achieve? (please note that I am editing wordpress site and the divs are generated from page builders plugin)
I think you just have to erase the $ from function($) and change $to jQuery in the function itself:
jQuery(document).ready(function(){
jQuery(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});
});
perhaps you can add inline css:
<style type="text/css">
div.testimonial_wrapper {
padding-left : auto !important;
padding-right: auto !important;
}
</style>
the above will apply on new elements also but make sure it comes after the .css include
i have added my own styles and your required styles also, with out disturbing the line styles
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
$(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p class="testimonial_wrapper" style="background-color:#ff0000;border:1px solid #000;">This is a paragraph.</p>
<p class="testimonial_wrapper" style="background-color:#00ff00;border:1px solid #000;">This is a paragraph.</p>
<p class="testimonial_wrapper" style="background-color:#0000ff;border:1px solid #000;">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
</html>
I'm trying to pass a div's id to a javascript function that does something simple, like change the background color of the div.
Weird thing is, my code works in the w3schools.com Tryit editor, but not in JSFiddle. It also doesn't work in my compiler (Coda 2).
Is this even the right way of going about this? Here's my code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>
</body>
</html>
and here's the JSFiddle stuff: http://jsfiddle.net/BH9Rs/
You need to use document.getElementById to get the element from the id
function changeBackgroundColor(asdf){
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
and pass the id like this (in single quotes)
<button onclick="changeBackgroundColor('myDiv')">
And in your fiddle put your function inside the Head section.
(select no-wrap in Head) at left side Framework and Extension option
Js Fiddle Demo
Change the script placement combo to no wrap - in <head> (second combo box on the left panel)
myDiv is an unknown identifier.
Use document.getElementById() in order to refer to your div:
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>
In addition, you have to move your JS code in your HTML due to the jsFiddle environment: http://jsfiddle.net/BH9Rs/1/
<script>
function changeBackgroundColor(asdf) {
asdf.style.backgroundColor = "#fff000";
}
</script>
<div id="myDiv" style="background:red">this is my div</div>
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>
Inline styles and inline click events? boo.
<div id="myDiv"> this is my div </div>
<button id="clickMe"> Set background color </button>
<script>
document.getElementById('clickMe').onclick = function(){
document.getElementById('myDiv').style.backgroundColor = '#fff000';
}
</script>
You mast do so:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor('myDiv')"> Set background color </button>
</body>
</html>
I have a question, could you help me:D
I used dijit.editor in dojo. When i input img tag like :
<img src="abc.jpg" alt="" class="alignleft" />
into the editor,
So i want to style css for class .alignleft in editor, how can i do it, because I can't style html code in the editor. Outside Editor everything is ok.
Thanks for any suggestion:D
Another alternative is to define stylesheets direclty in the editor's parameters. The semicolon ";" is used as a separator.
var editor = new dijit.Editor({
styleSheets: 'linkToStylesheet1;linkToStylesheet2;etc.'
});
The dijit.Editor runs inside iframe, which is the reason your parent document styles are not working. You have to inject styles into editor's iframe. The most straightforward way I can come with is to put styles' definition inside dijit.Editor tag:
<div data-dojo-type="dijit.Editor">
<style type="text/css">
.blue {color: blue;}
</style>
<p class="blue">blue</p>
</div>
Some code to explain the difference:
<head>
<style type="text/css">
.green {color: green;}
</style>
</head>
<body class="claro">
<div data-dojo-type="dijit.Editor">
<style type="text/css">
.blue {color: blue;}
</style>
<p class="green">green is NOT green</p>
<p class="blue" >blue is blue</p>
</div>
<body>
You can also specify a stylesheet to be used by the editor, thus avoiding having to rewrite any css. Specifying the same stylesheet you're using for your parent page would solve your problem. When I instantiate this programmatically, it looks like this:
var editor = new dijit.Editor({
/* snipping my many parameters... */
});
editor.addStyleSheet('style.css');
I get a script from a website to put it into my website, but the font color is not what I want.
The script is:
<script language="javascript" src="http://www.parstools.net/calendar/?type=2"></script>
and now I want to change the font color of it. What should I do?
I would really appreciate your help, thanks.
Examining the source of that script, it is simply writing an anchor link with document.write():
document.write("<a href='http://www.ParsTools.com/'>1389/1/31</a>");
You may want to include that script inside a <div>, and then style the anchor links within that <div> using CSS:
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
Then you should also add the following CSS class definition:
div#calendar a {
color: red;
}
The following is a full example:
<!DOCTYPE html>
<html>
<head>
<title>Simple Demo</title>
<style type="text/css">
div#calendar a {
color: red;
}
</style>
</head>
<body>
<div id="calendar">
<script src="http://www.parstools.net/calendar/?type=2"></script>
</div>
</body>
</html>
I assume you want to change the font colour of the HTML code produced by the script? If so, just use normal CSS in your external stylesheet and it will apply to the added content.
For example, if you want to make the text inside the element myElement a nice blue colour:
#myElement {
font-color: #0099FF;
}
If the script is not your own, then you will want to analyse the code produced by it to work out which elements you need to style in order to change the colour of the text. Many external scripts that you embed in your website contain inline CSS rules, meaning that you will have to override many elements in your external CSS stylesheet to change simple things like text colour. You may also have to add !important to the end of your CSS rule in order to override the inline styling:
#myElement {
font-color: #0099FF !important;
}