css交互

最新推荐文章于 2023-03-29 14:21:22 发布

Jason.Yang_Tom

最新推荐文章于 2023-03-29 14:21:22 发布

阅读量483

点赞数 1

分类专栏： Java的中级文章标签： CCSS ĴJavaScript

本文链接：https://blog.csdn.net/weixin_42299463/article/details/80949281

版权

Java的中级专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS交互

回顾样式表

样式表的基本语法

标签选择器
ID选择器
类选择器

标签选择器

input{
   width:120px;
   border:solid 1px #ff0000;
}

ID选择器

#flow{
  color:#ff0000
}

类选择器

.center{
   text-align:center;
   font-weight:bold;
}

常见样式

文本属性
背景属性
边框属性
边界属性
填充属性
浮动属性
列表属性
定位属性

类别	属性	描述
文本属性	字体大小	字体大小
	字体系列	字体类型
边框属性	边境	设置四个边框所有的属性
	边框宽度	设置边框的宽度
	边框样式	设置边框的样式
	边框颜色	设置边框的颜色
边界属性	余量	设置所有外边框属性
	利润率左	设置元素的左外边距
	保证金右	设置元素的右外边距
	边距	设置元素的上外边距
	下边距	设置元素的下外边距
填充属性	填充	设置元素的所有内边距
	填充左	设置元素的左
	填充右	设置元素的右
	填充顶	设置元素的上
	填充底	设置元素的下

样式表类型

行内样式
内部样式表
外部样式表

行内样式

<input name="user" type="text" style="width:100px; border:solid 1px #cccccc;" />

内部样式

<html>
<head>
<title>内部样式表</title>
<style type="text/css">
    body{
        font-size:12px; 
        line-height:20px;
    }
   .video{
        margin: 3px;
        float: left;
    }
</style>
</head>

外部样式

外部样式使用标签链接到外部样式文件

<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
……
</body>
</html>

JavaScript的访问样式的常用方法

使用getElement系列方法访问元素
改变样式属性：
1. 风格属性
2. 的className属性

document.getElementById("titles").style.color="#ff0000"; // 真确
document.getElementById("titles").style.font-size="25p"; // 错误

风格对象的属性

类别	属性	描述
填充（边距）	填充	设置元素的填充
	paddingTop	设置元素的上填充
	paddingBottom来	设置元素的下填充
	paddingLeft	设置元素的左填充
	paddingRight	设置元素的右填充
边框（边框）	边境	设置四个边框所有的属性
	borderTop	设置上边框的属性
	borderBtttom	设置下边框的属性
	borderLeft	设置左边框的属性
	borderRight	设置右边框的属性

JavaScript的访问样式的应用

通过JS实现图片选中聚焦效果

20171214162854

思路

把图书图片放在一个DIV中
通过图片的获取焦点事件（的onmouseover）来设置样式属性
通过图片的失去焦点事件（的onmouseout）来还原风格属性

  <style>
    .img {
        width:150px;
        height:150px;
        border:solid 1px #c9c9cb;
        margin-right: 10px;
        float:left;
    }
  </style>

<body>
    <div class="img">
        <img src="./images/1.jpg" onmouseout="unSelect(this);" onmouseover="setSelect(this);" width="150px" height="150px">
    </div>
    <div class="img">
        <img src="./images/2.jpg" onmouseout="unSelect(this);" onmouseover="setSelect(this);" width="150px" height="150px">
    </div>
    <div class="img">
        <img src="./images/3.jpg" onmouseout="unSelect(this);" onmouseover="setSelect(this);" width="150px" height="150px">
    </div>
 </body>

<script>
    function setSelect(img){
        img.style.border = "solid 1px red";
    };

    function unSelect(img) {
        img.style.border = "solid 1px #c9c9cb";
    }
</script>

获取行内样式的方法

的document.getElementById（elementId）。样式属。样式性值

<span id="test" style="color:red;">11111</span>

var test = document.getElementById("test");
var spanColor = test.style.color;

课后作业

JavaScript的访问样式的常用方式有哪些？
常用选择器有哪几种？优先级是怎样的？
CSS样式表有哪几种？如何导入外部样式表？
JavaScript中有哪些常用样式属性？

Jason.Yang_Tom

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css交互

CSS交互回顾样式表样式表的基本语法标签选择器ID选择器类选择器标签选择器input{ width:120px; border:solid 1px #ff0000;}ID选择器#flow{ color:#ff0000}类选择器.center{ text-align:center; font-weight:bold;}常见样式文本属性背景属性边框属性边界属性填...
复制链接

扫一扫