Let's make this life Easy, as well as you can
Mengulas berbagai cerita kehidupan mulai dari tradisi hingga teknologi, tips, solusi, informasi, internet, pekerjaan, hiburan, Kesehatan, mitos, fakta, klenik, unik bahkan mistik yang diulas berdasarkan pengalaman serta dari berbagai referensi, semoga bermanfaat
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

Change css with javascript

Yes, how to change css style only for one user-agent

For example, CSS Style only for UCBrowser

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?

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">
<!--
 document.write("
<style>
body {background: #000; padding: 0pc; margin: 0px}
#mainframe {width: 728px; padding: 10px 30px; background: #fff}
</style>
");
-->
</script>
This script will work on all user-agent

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.

Label: , , ,

Bagikan ke :
facebook google+ twitter BBM

Tulisan CSS Style only for each user-agent ini ditulis pada 5/17/2015, Admin akan berusaha sebaik mungkin agar informasi ini sesuai dengan kondisi saat ini (Terupdate), harap maklum jika informasi yang terkandung dalam artikel ini sudah kadaluarsa
| Cari CSS Style only for each user-agent di : AOL | Ask | Bing | DuckDuckGo | Microsoft | Google | ixquick | Yahoo | Yandex | Yippy | MySearch