JavaScript操作CSS基础知识

王真教掌门

已于 2022-03-04 16:48:52 修改

阅读量594

点赞数 8

文章标签： css javascript 前端

于 2022-03-04 16:46:03 首次发布

本文链接：https://blog.csdn.net/WZJ278/article/details/123275791

版权

前言

CSS说白了就是对网页布局进行操作，对网页上的样式排版，改自己想要的内容，对我来说操作网页内容我都称为CSS

代码讲解

常用的一些基本语法

文本属性	font-size	字体大小
文本属性	font-family	字体类型
边框属性	border	设置四个边框所有的属性
	border-width	设置边框的宽度
	border-style	设置边框的样式
	border-color	设置边框的颜色
边界属性	margin	设置所有外边框属性
边界属性	margin-left margin-right margin-top margin-bottom	分别设置元素的左、右、上、下外边距
填充属性	padding	设置元素的所有内边距
填充属性	padding-left padding-right padding-top padding-bottom	分别设置元素的左、右、上、下内边距

onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

scrollTop	设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollLeft	设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
clientWidth	浏览器中可见内容的宽度，不包括滚动条等边线，会随窗口的显示大小改变
clientHeight	浏览器中可以看到内容的区域的高度

例题1

一个简易的商品信息框

代码运行结果

进行修改操作



修改完成操作



添加商品操作



对table 表格进行了操作操作了里面的内容也可以成为CSS操作

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        input{
            width: 40px;
        }

    </style>
</head>
<body>
<table border id="table">
    <tr>
        <td>商品名字</td>
        <td>商品价格</td>
        <td>商品介绍</td>
        <td>商品操作</td>
    </tr>
    <tr>
        <td><span>老白干</span></td>
        <td><span>99.0</span></td>
        <td><span>老哥两来一个口</span></td>
        <td>
            <button onclick="delRow(this)">删除</button>
            <button onclick="updRow01(this)">修改</button>
        </td>
    </tr>
</table>
<button onclick="addRow()">添加购物车</button>
<script>

    function updRow01(btn) {
        //找到当前行中的span
        var tr=btn.parentElement.parentElement
        //拿到span标签
        //遍历span标签集合
        //将span标签改成输入框
        // HtmlCollection 会根据页面中的元素变化而变化
        // 将Collection集合变成数组 数组是不会根据页面中的元素变化而变化
        var spans=Array.from(tr.getElementsByTagName("span"))
        for(let s of spans){
            //s就是每一个span标签
            //将值给到变化之后的输入框
            var text=s.textContent
            s.outerHTML="<input value='"+text+"'>"
        }
        btn.textContent="完成"
        btn.setAttribute("onclick","updRow02(this)")
    }

    function updRow02(btn) {
        var tr=btn.parentElement.parentElement
        var is=Array.from(tr.getElementsByTagName("input"))
        for(let s of is){
            var text=s.value
            s.outerHTML="<span>"+text+"</span>"
        }
        btn.textContent="修改"
        btn.setAttribute("onclick","updRow01(this)")
    }

    function delRow(btn) {
        //btn就是你点击的那个按钮
        var tr=btn.parentElement.parentElement
        //将标签本体直接改为空字符串
        tr.outerHTML=""
    }

    function addRow() {
        table.innerHTML+=`
            <tr>
                <td>老白干</td>
                <td>99.0</td>
                <td>老哥两来一个口</td>
                <td>
                    <button onclick="delRow(this)">删除</button>
                    <button>修改</button>
                </td>
            </tr>
`       ;
    }

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

例题2

一个简单浮动窗口

运行结果

移动结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid black;
            /*绝对布局的特点：可以随便调整位置*/
            position: absolute;
            /*top顶部 bottom下面 left左边 right右边*/
            right: 20px;
            top: 40px;
            transition: .1s;/*给浮动窗口添加延迟效果*/
        }
    </style>
</head>
<body>
<div id="ad">
    <button onclick="ad.style.display='none'">x</button>
    <br>
    <img src="img/4.gif" alt="">
</div>
<script>

  //窗口的滑动事件
    window.onscroll=()=> {
        //获取到窗口滚动的距离 scrollTop
        ad.style.top=40+document.documentElement.scrollTop+"px"
        //得到的数值后面一定要加px单位不然无法解析
        //给div绝对布局的顶部距离赋值让其跟随滚动距离来改变
    }
	function a(){
		    for(var i=0;i<100;i++){
		        //在页面中进行html输出
		        document.write("<p>淘宝</p>")
		    }
	}
	a()
	</script>
</body>
</html>

例题3

做一个鼠标图片移入放大效果

运行结果

鼠标移入移入效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            position: absolute;
            /*设置事件全部无效*/
            pointer-events: none;
            display: none;
        }

    </style>
</head>
<body>
<img id="m1" src="img/1.gif" alt="">
<div id="div"></div>
<script>

    m1.onmouseover=function (){
        div.style.display="block";
        div.style.border="2px solid black";
    }

    m1.onmouseout=function (){
        div.style.display="none";
    }
    //使用js的形式给对象赋值
    m1.onmousemove=(e)=>{//需要一个参数对象 js会自动将参数传入
        //需要事件对象 Event
        console.log(e.clientX,e.clientY)
        div.style.left=e.clientX-50+"px"
        div.style.top=e.clientY-50+"px"
        div.style.background="url("+m1.src+") center/cover";
        //将图片平铺满在div里面做到一个类似放大的效果
    }
</script>
</body>
</html>

以上就是本文所有的内容了，谢谢观看，我之后还会写一些与HTML相关的文章，喜欢的可以点个赞+收藏+关注。