Dynamically Changing Stylesheet Path Not Working in Ie and Firefox

Dynamically changing stylesheet path not working in IE and Firefox

Rather than changing the sheet in a single link, try using alternate style sheets. See this link on using alternate style sheets:

http://www.alistapart.com/articles/alternate/

Dynamically loading css stylesheet doesn't work on IE

Once IE has processed all the styles loaded with the page, the only reliable way to add another stylesheet is with document.createStyleSheet(url)

See the MSDN article on createStyleSheet for a few more details.

url = 'style.css';
if (document.createStyleSheet)
{
    document.createStyleSheet(url);
}
else
{
    $('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head'); 
}

Dynamically loading a style sheet on different domain doesn't work in Firefox

I don't really care for this solution, but what I did was read the css in using ajax and append it directly as a style to the page. I would still be interested in how, or if I can dynamically load a css from another domain using the link tag. Here's an example of my loadCSS method.

function loadCSS(url){

    $jq11.ajax({
        url: url,
        type: 'GET',
        dataType: 'text',
        success: function (data) {
            result = data;
            var css = result,
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

            style.type = 'text/css';
            if (style.styleSheet){
                style.styleSheet.cssText = css;
            } else {
                style.appendChild(document.createTextNode(css));
            }

            head.appendChild(style);

        }
    });
}

CSS styles not applied on dynamic elements in Internet Explorer 7

We found the problem: instead of using setAttribute('class', 'cssClass') on a new element, we needed to use setAttribute('className', 'cssClass'), where 'cssClass' is some user defined CSS class.

While FF handles the 'class' attribute, IE chokes because 'class' is a special keyword in Javascript. Thus, you must use 'className' as the attribute name.

Thanks for everyone's responses!

Dynamically loaded css doesn't apply to dynamically loaded js views in IE8

Did you try using createStyleSheet instead?

Or you could serve IE styleSheet.cssText instead of createTextNode.

CSS don't work properly in Chrome / Edge, but do in Firefox

Because I have not found a way to change this via css I check now only the browser when loading and load (if necessary) a small seperate css.

Fix js:

var ie = /*@cc_on!@*/false || !!document.documentMode;
var edge = !ie && !!window.StyleMedia;
var chrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
var edge_chrome = chrome && (navigator.userAgent.indexOf("Edg") != -1);

if (edge || chrome || edge_chrome) {
    var head = document.getElementsByTagName('HEAD')[0];
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '/path/to/chrome_edge_fix.css';
    head.appendChild(link);
}

chrome_edge_fix.css:

.new_ar_wrp_tr_has_timer>td:nth-child(1)::after {
    margin-top: -40px !important;
}

Sorry for the late answer

Dynamically created SVG not working in Firefox, but works in Chrome

Your d path parameters are incorrectly formatted.

You have something like

d="M 0 100, L 1000 100"

whereas it should be

d="M 0,100 L 1000,100"

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

The fix is

nline.setAttribute("d", "M 0," + d + " L " + w + "," + d);

JSFiddle

---

Related Topics