DOM属性及CSS属性补充

mac2026-02-14  10

DOM属性及CSS属性补充

一、DOM选择器

//只是获取内部内容仅仅文本,忽略标签// innerText //获取标签内部所有东西,包括标签// innerHTML //赋值时也相同,innerText赋值时把内容当作字符串来处理, innerText="内容" //赋值时把整个标签添加进去 innerHTML value 对于input生效,用来获取其中的值 对于select生效,用来获取value值 注意此时id写在select中 对于textarea生效,用来获取值 selectedindex 通过修改此值来修改选项

二、CSS属性补充

① position

//固定某个位置 fixed //单独存在无意义 relative //固定第一次有意义 之后滑动无意义 类似于相对定位 absolute //相当于fixed 区别是高度比fixed高 absolute+overflow:auto

②若设置图片在一个div中的位置可用margin-top 等来设置

<style> .item{ background-color: #999999; } .item:hover{ color: #54b5f4; //鼠标放在item标签上面字体变红// } </style> <style> .item{ background-color: #999999; } .item:hover{ color: #54b5f4; } .item:hover .b{ background-color: yellow;//只要光标放在b标签上就会变色// } </style> //注意:border-ridous:50% 让图片变圆 //placeholder="请输入关键字" padding:0 20px; 上下为0 左右为20px

③图标引入:

首先在fontasome下载ont-awesome-4.7.0 然后引入 <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css"> //类似于表格的引入根据font-size设置图标大小 <i class="fa fa-envelope" aria-hidden="true"></i> <span style="display: inline-block;background-color: red;padding: 9px;border-radius: 50%;line-height: 1px;">5</span> <!--//若不加line-hight:1px;则椭圆竖起来,通过padding来调整椭圆大小//--> </div> <!--若为多个图标排在一起,则通过每个图标div来调节padding进而调节间距-->

④图表引入:

首先下载echarts.min.js文件然后引入 <script src="../javascript/echarts.min.js"></script> <!-- 此标签用于存放表格,必须有高度和宽度--> <div id=''form_content1' style="height:400px;width:600px;"></div> var dom = document.getElementById("form_content1"); var myChart = echarts.init(dom); var app = {}; option = null; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] <!--设置图表的横坐标--> }, yAxis: { type: 'value' }, series: [{ data: [1, 1, 0, 1, 1, 1, 0], <!--设置图表的纵坐标--> type: 'line' }] }; ; if (option && typeof option === "object") { myChart.setOption(option, true);
最新回复(0)