Someone asked, How do I change the CSS uses javascript.
There is a specific purpose if a webmaster wants to change the CSS style of a website through javascript, as we know there is many sophisticated tools, gadgets and portable devices that can be used as Internet browser.
Let we see a various mobile phones with different internet browsers, webmasters want to see the website style is different on each user agent used, opera mini, Firefox, Chrome, iOS, UCBrowser and others
Using @media (max-width: 999px) {// css code here} applies to all of the devices with a screen size according to the max-width, I would like CSS is valid only for Operamini, UCBrowser, Firefox or Chrome only. Can you do it?
No, I need the CSS Style only work on spesific user-agent, for example only for Firefox.
okay, if that's what you want, you have to add some script before css above
This way you do not need to write user-specific agent, simply replace UCBrowser with another name user-agent,
if ((navigator.userAgent.match(/UCBrowser/i)) || (navigator.userAgent.match(/UCBrowser/i)))
Changed with
if ((navigator.userAgent.match(/Operamini/i)) || (navigator.userAgent.match(/Operamini/i)))
See the example :
Hope this help, and thank you for reading.
There is a specific purpose if a webmaster wants to change the CSS style of a website through javascript, as we know there is many sophisticated tools, gadgets and portable devices that can be used as Internet browser.
Let we see a various mobile phones with different internet browsers, webmasters want to see the website style is different on each user agent used, opera mini, Firefox, Chrome, iOS, UCBrowser and others
Yes, how to change css style only for one user-agent
For example, CSS Style only for UCBrowserUsing @media (max-width: 999px) {// css code here} applies to all of the devices with a screen size according to the max-width, I would like CSS is valid only for Operamini, UCBrowser, Firefox or Chrome only. Can you do it?
It is easy to make CSS website style is different on each other user-agents
You can copy and modify this script.<script type="text/javascript">This script will work on all user-agent
<!--
document.write("
<style>
body {background: #000; padding: 0pc; margin: 0px}
#mainframe {width: 728px; padding: 10px 30px; background: #fff}
</style>
");
-->
</script>
No, I need the CSS Style only work on spesific user-agent, for example only for Firefox.
okay, if that's what you want, you have to add some script before css above
<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/UCBrowser/i)) || (navigator.userAgent.match(/UCBrowser/i))) {
document.write("
<style>
body {background: #000; padding: 0pc; margin: 0px}
#mainframe {width: 728px; padding: 10px 30px; background: #fff}
</style>
");
}
-->
</script>
This way you do not need to write user-specific agent, simply replace UCBrowser with another name user-agent,
if ((navigator.userAgent.match(/UCBrowser/i)) || (navigator.userAgent.match(/UCBrowser/i)))
Changed with
if ((navigator.userAgent.match(/Operamini/i)) || (navigator.userAgent.match(/Operamini/i)))
How to use
Better, put this script bellow all of css style used on the website, or right before closing tag of head </head>See the example :
<html>
<head>
<title>Your Webpage Title</title>
<style>
<!--Default Style Sheet-->
</style>
<!--Put the script starte here-->
<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/UCBrowser/i)) || (navigator.userAgent.match(/UCBrowser/i))) {
document.write("
<style>
body {background: #000; padding: 0pc; margin: 0px}
#mainframe {width: 728px; padding: 10px 30px; background: #fff}
</style>
");
}
-->
</script><!--the script end-->
</head>
<body>
Website Content here
</body>
</html>
Hope this help, and thank you for reading.
Labels: blog template, css, jquery, Webmaster