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');
Related
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>
Is it possible to isolate elements inside a div as if it were in an iFrame?
I have an app inside SharePoint that is all jacked up from the global SharePoint styles which I want to turn off completely so my app uses only the css it contains.
EG: Let's say there is a global stylesheet for the page. Let's say I put a div on that page with it's own embed css. Can I somehow ignore the global stylesheet entirely?
https://plnkr.co/edit/2H2TJJz6rNZK18OK6VLW?p=preview
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Global parent element - red</h1>
<div class="self-contained-css">
<style type="text/css">
h1 {
color:red;
border: 1px solid blue;
}
</style>
<h1>Self contained css element - blue</h1>
<p>Self contained css should behave as if it was inside an iFrame. This is to isolate from SharePoint css ultimately.</p>
</div>
</body>
</html>
Web Components would be your only option for encapsulation similar to an iframe. You can get pretty good coverage with a polyfill like webcomponents.js
Polymer is a great framework for making Web Components easier.
This would make your code look like this:
... HTML here that uses your global styles ...
<my-element></my-element> <!-- this element would not inherit the global CSS -->
And inside of your my-element component (which would just be another file in your file system that you import into the page - see docs above), you can include unique styles to the content of my-element.
The problem is your global styles have a !important declaration in them. While I don't normally advise this, you'd have to add it to your declaration to be able to override them. i.e.
/* Global parent styles go here */
h1 {
color:red;
border: 5px solid red !important;
}
h1 {
color:red;
border: 1px solid blue !important;
}
<body>
<h1>Global parent element - red</h1>
<div class="self-contained-css">
<style type="text/css">
h1 {
color:red;
border: 1px solid blue !important;
}
</style>
<h1>Self contained css element - blue</h1>
<p>Self contained css should behave as if it was inside an iFrame. This is to isolate from SharePoint css ultimately.</p>
</div>
use shadow dom in my case i use angular 1 so i used an iframe but in angular 2 we can play with shadow dom
Use an iFrame with the srcdoc attribute set to your html.
var myIframe = document.createElement('iframe');
myIframe.src = 'about:blank';
var info = `<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Global parent element - red</h1>
<div class="self-contained-css">
<style type="text/css">
h1 {
color:red;
border: 1px solid blue;
}
</style>
<h1>Self contained css element - blue</h1>
<p>Self contained css should behave as if it was inside an iFrame. This is to isolate from SharePoint css ultimately.</p>
</div>
</body>
</html>`;
myIframe.srcdoc = info;
var body = window.document.querySelector('body');
body.insertBefore(myIframe, body.firstChild);
I needed to dynamically inject my html content without being impacted by the pages css so that is why my iframe was created with js, but shouldn't be any reason that yours couldn't be written in html only. Although the srcdoc might be a little messy, so it might be cleaner to write it (the srcdoc) as a js variable and then attach it.
As you know, a web page is the union of a html file, one or more css files and one or more javascript files: the first two elements are parsed by the browser to generate the DOM and other data structures useful for the rendering of the page .
Javascript files are executed by an engine, and they can change the value of the DOM or of the data structures related to css, so that, after the execution of a javascript, the "actual status" of a web page can be different from what was statically described by the original html and css code.
I need to develop a firefox add-on that grabs the "actual status" of a web page and stores it to disk, as a couple html + css file.
For the html file is quite easy, i need to serialize the DOM. My concerns are about the css: I can traverse the DOM and for each element get its stylesheet, but it will be
extremely slow and produces a not optimized css code.
Let's make an example
I have this html code:
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type='text/javascript' src="changebackground.js" > </script>
</head>
<body>
<div class="divclass" >
<form>
<h2>click to change the background</h2>
<input type="button" value="version" onclick="changebg()" />
</form>
</div>
</body>
Style.css has this definitions:
.divclass{
margin: .5in;
height: 400px;
}
body{
background-color: white;
color: blueviolet;
}
and changebackground has this code:
function changebg() {
document.body.style.backgroundColor = 'black';
}
Obviously, after clicking the button the background's color becomes black.
My goal is to write an add-on that , after this change, gives me back the css with the style's modification, i.e.:
.divclass{
margin: .5in;
height: 400px;
}
body{
background-color: black;
color: blueviolet;
}
Any ideas?
You don't actually need to traverse anything. Inline styles are already part of the, so you get that for free, e.g.:
elem.style.width = "100px";
elem.outerHTML == '<elem style="width: 100px;>";
So to produce a "dump" of the current DOM, incl. inline styles, etc. do:
var html = document.documentElement.outerHTML;
You may also want to serialize document.doctype.
In the unlikely event that a script actually messes with external stylesheets (<link rel="stylesheet">, you may do something like what I described in "Get text of a modified stylesheet" to get the current set of rules. Again, inline styles (<style> and style= attributes) are already present in .outerHTML.
EDIT: What you ask now is not possible, because this is not how inline styles work.
Consider the following html fragment:
<div>first div</div>
<div>second div</div>
Now the following code runs:
document.querySelector("div").style.background = "black";
This will cause the first div to have an inline style:
<div style="background: none repeat scroll 0% 0% black;">first div</div>
<div>second div</div>
Demo Fiddle
How would that rule look like? div { background: black; } is obviously wrong, as this would affect all divs.
You could generate new classes and/or ids, but then you need to manipulate and store the DOM, and could have used my original answer in the first place.
The following code works:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
But the problem is you have to repeat the inline JavaScript for all img tags. I tried to put the script in the head to no avail:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("img");
x.style.opacity=1; x.filters.alpha.opacity=100;
}
</script>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
Everything seems right to me, but it doesn't work.
Many thanks for any help!
Mike
document.getElementsByTagName returns a collection (which is a lot like an array), not an HTMLElementNode. Its members have a style property, but it doesn't have one of its own, and you can't distinguish the element on which the event happened from any other.
A step in the right direction would be:
function makeSolid(element) {
element.style.opacity=1; x.filters.alpha.opacity=100;
}
and then onmouseover="makeSolid(this)"
A further step in the right direction would be to use unobtrusive JavaScript and attach the events using JS instead of using intrinsic event attributes. Due to differences between browsers, using an event handling library to iron out the differences would be wise.
Since this depends on JS, the * initial* styling should be withheld until JS is confirmed to be on. Setting document.body.className = 'js' and then using .js ... as a descendent selector in each CSS ruleset is a popular way to do this.
Since this appears to be simply presentational, a further improvement would be to forget about JavaScript entirely and just do it using CSS:
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
opacity:1;
filter:alpha(opacity=100);
}
Pass a reference to the element into the function, using this:
function getElements(x) {
x.style.opacity=1; x.filters.alpha.opacity=100;
}
Called like this:
onmouseover="getElements(this)"
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;
}