请问怎样转换CSS样式

html-css08

请问怎样转换CSS样式,第1张

楼主说的应该是更换网页皮肤吧。关键代码在这里:

<link

href="style_change/black/sty_black.css"

rel="stylesheet"

type="text/css"

id="ch_css"

/>

点击某个按钮的时候,用JS获取<link>标签的id,即获取这个<link>对象,然后通过JS更换href链接到另一个CSS样式表,达到换肤的目的。

很简单,只要把html中各个标签的样式都提取出来,放到css中,在给各个元素引用就可以了。

1、在html中找到<head></head>标签,在其中增加<style type="text/css"></style>标记

2、找到html中的一个元素比如

<div style="background:greenalign:centerwidth:20%font-size:14px">xxx</div>这种,将其中的style=""双引号之间的内容复制,粘贴到1中创建的标记内。在用一个选择器包裹住,最后在元素上指定class="选择器"就可以了

3、例子 如下两个div,第一个在style中设置样式,第二个通过css引用样式,最终效果过一样

<html>

    <head>

        <style type="text/css">

            .divcss{

                background:green

                align:center

                width:20%

            }

        </style>

    </head>

    <body>

        <div style="background:greenalign:centerwidth:20%">xxx</div>

        <div class="divcss">xxx</div>

    </body>

</html>

1、可以使用css直接进行相关的css变换

2、使用js进行css变换

比如,鼠标经过时css样式与鼠标移开css样式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="keywords" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="">

<meta name="author" content="Robert.Leng">

<title>不刷新 css变换实例</title>

<style>

  .test{

    border:1px solid #ccc

    color:red

  }

  .test:hover{

      color:yellow

      border:1px solid #f0f0f0

  }

</style>

</head>

<body>

<div class="test">

   <p>这只是一个测试</p>

   <span>2017-10-31</span>

</div>

</body>

</html>

js举例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="keywords" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="">

<meta name="author" content="Robert.Leng">

<title>不刷新 css变换实例</title>

<style>

  .test{

       border:1px solid #ccc

       color:red

  }

  .test.current{

      color:yellow

      border:1px solid #f0f0f0

  }

</style>

</head>

<body>

<div class="test">

   <p>这只是一个测试</p>

   <span>2017-10-31</span>

</div>

<spcript src="/jquery.mini.js">  //引入jquery库

<script>

$(document).ready(function(){

    $('.test').mouseover(function()

    {

         $(this).addClass("current")

    }).mouseout(function()    

    {

        $(this).removeClass("current")        

    })

})

</script>

</body>

</html>

当然上面的css可以直接在js中写,这里只是为了方便没有这样做,具体的js添加css属性可参考jquery库