javascript - Override .css stylesheet file (not inline)

Question

Is it possible to somehow override the default (in this case liquid) CSS stylesheet, but without using inline styles? Also I want that style to apply only to that specific page, and not any others.

Yes, I can use !important inside <style> tag on that specific page, but I would need to reset a lot of things. It just too much work, and looks very messy.

So is there any way I could reset ALL elements to default property values, and use my own style just on that one page?

标签： javascripthtmlcssliquid

Answer 1

那么你不能修改你的.css文件，但你可以使用动态替换文件js。

function replaceFile(newFile, fileLink) {
    var oldcss = document.getElementsByTagName("link").item(fileLink);
    var newcss = document.createElement("link");
    newcss.setAttribute("rel", "stylesheet");
    newcss.setAttribute("type", "text/css");
    newcss.setAttribute("href", newFile);
    document.getElementsByTagName("head").item(0).replaceChild(newcss, oldcss);
}

另一种解决方案是使用jQueryor添加所需的样式js。

$('.demo').css({'background-color':'red','color':'white');