改变css的样式

最新推荐文章于 2024-01-27 12:22:35 发布

uwisvgsn

最新推荐文章于 2024-01-27 12:22:35 发布

阅读量189

点赞数

分类专栏：笔记文章标签：前端 javascript css

本文链接：https://blog.csdn.net/uwisvgsn/article/details/121412808

版权

笔记专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    Css中写法 Js中的写法 说明
     Color       Color        样式名如果是一个单词写法是一样的
     Font-size FontSize   如果有多个单词样式名中的横杠去掉，后面的单词首字母大写
-->
    <style>
        .asd{
            /*css样式：加个下划线，改颜色，改字体*/
            font-family: 楷体;
            color: coral;
            font-size: 50px;
            text-decoration: blue;
            font-style: italic;
        }
    </style>
</head>
<body>
<p id="p1">第一自然段</p>
<p id="p2">第二自然段</p>
</br>
<input type="button" value="改几个样式" id="a1">
<input type="button" value="改类样式" id="a2" οnclick="aaa()">
<script>
   /* 在js中修改样式有两种方式
    每一条语句只能改变一种样式
    语法:
    1.元素.style.样式名=样式名

    2.先使用class定义类样式，然后再使用一下方法一次性修改一批样式
    语法:
    元素.classname=类样式名*/
    document.getElementById("a1").οnclick=function () {
       x1= document.getElementById("p1")
        x1.style.fontFamily="楷体"
        x1.style.color="red"
        x1.style.fontSize="50px"
    }
    function aaa() {
        aa=document.getElementById("p2")
            aa.className="asd"
    }

</script>
</body>
</html>