I'm looking for a lightweight dialog plugin that doesn't require css.
I need it for a userscript, which means I can't include a css file
Any ideas?
You could dynamically inject a css file from a remote domain, which is what disqus does, for example.
var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'http://yourhost.com/your.css'
You'd make to make sure your css has low chance of clashing with your user site's styles by restricting the styles using id or class names.
you can simply set the innerHTML of a style tag created via javascript. In this way you obtain an inlined stylesheet.
E.g.
var styleText = "body { background-color: red } div { color: lime }";
var styleBlock = document.createElement("style");
styleBlock.innerHTML = styleText;
document.head.appendChild(styleBlock);
Another idea is to use a dataURI of a css file:
E.g.
var linkEl = document.createElement("link");
linkEl.href = "data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6YmxhY2sgfQo=";
linkEl.rel = "stylesheet";
linkEl.type = "text/css";
document.head.appendChild(linkEl);
Related
Actually i am using iframe element in html page but it is inside tag which means javascript. so I want to add css to that iframe element, how can I do that? Can someone help please
Styles from the parent will not be applied to the document within the iframe. The best solution is to add the stylesheet to the document in the iframe. Either via javascript or creating a template page to load in via src.
Something like:
var head = doc.head
var link = doc.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = ...src...
head.appendChild(link)
This is an example: link
yourElement.style.attribute = value
for example
var button = document.getElementById("btn")
button.style.color = "red"
button.style.marginTop = 0;
when writing css in javascript you must use camel case css for example type marginTop not type the margin-top
I am developing an Epub Reader application.
I need to add changing font tool in my application.
I have problem in my JavaScript side.
My app opens different Epub files and therefore I can not predict Epub HTML,CSS files content.
My function works for elements that doesn't have font-family attribute and it doesn't effect on elements could have font-family attributes like p,body and h tags.
changeFont function :
function changeFont(fontIndex) {
var fontFamilyValues = ["aldhabi.ttf", "b_nazanin.TTF", "b_nazanin_outline.ttf", "iransanse_mobile.ttf"];
var newStyle = document.createElement('style');
var font=fontFamilyValues[fontIndex];
var fontUrl="file:///android_asset/fonts/"+font;
var fontName=font.substring(0,font.lastIndexOf('.'));
newStyle.appendChild(document
.createTextNode("#font-face{ font-family:"+fontName+";src: url("+fontUrl+");}"));
document.head.appendChild(newStyle);
newStyle.appendChild(document.createTextNode("*{font-family:"+fontName+";}"));
}
inline style overrides <style> block (and style block overrides external css file). So you have to remove inline styles first:
$("*").css('font-family', '');
or using pure javascript:
var all = document.getElementsByTagName("*");
for (var i=0; i < all.length; i++)
{
all[i].style.removeProperty('font-family');
}
to force your new style over everything else you can also apply !important on your styles like this:
newStyle.appendChild(document.createTextNode("*{font-family:"+fontName+" !important;}"));
I remember from somewhere some simple way to use css code inside JS file, but can't remember how exactly.
Obviously simply putting the css code inside JS file won't work, I guess there's a need for some comments or something like that.
*Note: I don't want to use JS to render a <link...> for a css file. I want load JS file normally with <script...> and inside a *.js file I want include pure css code, as it would appear normally in *.css file.
$("#id").css("parameter","property");
example..
$("#id").css("border","1px solid");
for multiple css..
$("#id").css({
'font-size' : '10px',
'width' : '30px',
'height' : '10px'
});
better to use
addClass( )
function.. for multiple css property..
Nice little function to add Internal CSS Block to document
function createStyleNode(cssText, options, doc) {
doc = doc || document;
var style = doc.createElement('style');
style.type = 'text/css';
if(options && options.id){
style.id = options.id;
}
if (style.styleSheet){
style.styleSheet.cssText = cssText;
} else {
style.appendChild(doc.createTextNode(cssText));
}
return style;
}
cssText = 'body {color: red}';
head.appendChild(createStyleNode(cssText, {'id': 'stylesFromJS'}));
Adding Ids will be useful, if you are planning to delete / replace them later from JS.
I would like to inject some CSS into the head using link tags. I can get this to work pretty easily using
var linkNode = document.createElement('link');
linkNode.href = '"+ jqueryTablesorterCSS_URL +"';
linkNode.type = 'text/css';
linkNode.rel = 'stylesheet';
documentHead.appendChild(linkNode);
However I would like to have another already existing link tag be the last item in the head as it needs to take precedence. I do not have control over this other link tag and it already exists on the page.
Moving the other element by finding it like this does not seem to work.
var documentHead = document.head;
var customCSSNode = documentHead.querySelector("link[href$='custom.css']");
documentHead.appendChild(customCSSNode);
I feel kind of gross for suggesting this as it seems "wrong", though also seems to work when I tested it. I think if you wait for the load event on the new css you can reload the existing by adding it back to the the "head" with appendChild
Note in this sandbox "head" is actually "body".
You can manually play with the ordering of the two css files, but I believe the effect you want is correctly applied when this result shows a split background with a rose in the center/right.
If the rose is on the left or if the background is not a rose then I have failed.
You may need to open the demo in full screen. Sorry these were two easily grabbed CSS files to try to replicate what you are after.
var documentHead = document.body;
var existingNode = document.getElementById("existing");
var linkNode = document.createElement('link');
linkNode.type = "text/css";
linkNode.rel = "stylesheet";
linkNode.onload = function(){ documentHead.appendChild(existingNode); }
linkNode.href = "http://www.csszengarden.com/220/220.css";
documentHead.appendChild(linkNode);
<link id="existing" rel="stylesheet" type="text/css" href="http://www.csszengarden.com/120/120.css" />
<div>Success if background pink rose in center</div>
<div>Fail if background pink rose on left</div>
<div>fail if kind of blue hand print</div>
I want to disable/remove/not display the ::ms-clear button that is appearing in input fields in IE. How can I do the following
input[type=text]::-ms-clear { display: none; }
using JavaScript? It is sufficient for me to do this on each HTMLInputElement if that is easier.
(I wish not to use any external libraries such as jQuery)
It seems that pseudo-elements are readonly? I am trying to do
window.getComputedStyle(this.inputTextElement, "::ms-clear").setProperty("display", "none");
but I get exception NoModificationAllowedError.
The closest working thing to set this in JavaScript seems to be doing
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '::-ms-clear{display:none};';
document.getElementsByTagName('head')[0].appendChild(style);