How to add a CSS style dynamically to HEAD tag?
Question
I have an unusual scenario, where I need to take content for a STYLE tag (only the second tag ) from HTML document A and add it to the HEAD tag after the LINK tag of HTML DOCUMENT B . A and B are on the same server. It must be dynamically, I have no control of the CSS generated (cms).
I would like to know:
- What is the best approach, I need to avoid page flickering
- What is the less expensive
I can use HTML5 and JQUERY. I target mainly web-kit.
HTML A
<html>
<head>
<style type="text/css">
.styleA {}
</style>
<!-- I am interested just in the following style tag
<style type="text/css">
.styleB {}
</style>
//>
</head>
<body>
</body>
</html>
HTML B
<html>
<head>
<link rel="stylesheet" type="text/css" href="someothercss.css">
<!-- should be injected here -->
</head>
<body>
</body>
</html>
2 answers
solution1
1 2013-11-14 09:07:37
You can create a separate .js file with jQuery that manipulate the css (or just add it in the HTML code itself) and then just link the .js to HTML B or both if you want. Just set all the elements that needs to inherit the style to a class and then write the jQuery to manipulate the css for that class.
Example code:
$(".className").css({"background-color":"black","font-size":"12px"});
You can add and manipulate any css style within the curly brackets.
solution2
0 2013-11-14 09:10:17
You can try the below ways:
You can add that particular CSS Style in each page.
Have that particular CSS style in a separate Stylesheet. and refer that style sheet in the pages where needed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.