DOM属性及CSS属性补充

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);