css样式的显示和隐藏等部分总结

最新推荐文章于 2022-07-16 16:15:07 发布

dpc5517

最新推荐文章于 2022-07-16 16:15:07 发布

阅读量500

点赞数

分类专栏： html、js 文章标签： css html

本文链接：https://blog.csdn.net/DPCljw/article/details/104576832

版权

html、js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、首先非常感谢博主分享的笔记，此博主总结的非常的全，你们有时间可以去看看。连接如下：
css样式的显示和隐藏
1、根据此连接我在项目中的应用做一点补充。
①、 $(’#aaa’).css(‘display’, ‘block’); 显示但是作用在按钮的时候可能会出现换行的情况，此时就需要转换成行内块元素了。

　　(1)display:inline;转换为行内元素
　　(2)display:block;转换为块状元素
　　(3)display:inline-block;转换为行内块状元素

要注意此方法不能作用在table td tr 标签中因为定义的id是不能被获取的。
②、项目中可能会出现隐藏标签中的内容并且清楚所占优的空间。此时单单用①的方法是不能实现的，将要用如下方法（可能不是最简单的但确实有效）

$("#errorextPass2").css({ "width":"0px", "visibility": "collapse", "height": "0px" });

③、给元素添加置灰不可编辑属性，删除不可编辑属性

$("#userName").attr("disabled", "disabled");  // 变成不可编辑
$('#userName').removeAttr('disabled')	      // 变成可以编辑

补充其他内容，样式的控制已经value值的获取；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>html_text_var_attr_prop</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
 
<div id="box">
    年龄:<input type="text" name="age" id="x1" value="18"/> 
       <p>文本内容</p>  
</div>  
<div id="box1">
      <a href="#" id="link1" action="delete">删除</a>     
</div>
     
<script type="application/javascript">
    $(function(){
        /*val()获取value的值*/
        var str1=$("#x1").val();
        console.log("使用val()方法获取的是属性value的值:"+str1);
        var str2= $("#x1").attr("name");
        console.log("使用attr()获取的是元素任意属性的值:"+str2);
        var str3= $("#x1").attr("value");
        console.log("使用attr()获取的是元素属性的值:"+str3);
        var str4 =$("#box").html();
        console.log("使用html()获取的是div中所有内容包含标签:"+str4);
        var str5=$("#box").text();
        console.log("使用text()方法获取的是div中内部的所有文本值:"+str5);
        /*attr()和prop()的区别：主要在于自定义属性和固有属性的区别*/
        var str6 = $("#link1").attr("action");
        console.log("使用attr()获取自定义属性的值："+str6);
        var str7 = $("#link1").prop("action");
        console.log("使用prop()获取自定属性的值:"+str7);
    });
</script>

</body>
</html>

2、自定义table表单的宽度
①、在table中添加：table-layout:fixed;属性
②、定义单个th标签的宽度

 <table class="table table-striped" style="width:100%;height:100%;table-layout:fixed;">
   <thead>
       <tr>
           <th style="width: 100px;">序号</th>
           <th style="width: 130px;">接口名称</th>
           <th style="width: 170px;">时间</th>
           <th style="width: 100px;">状态</th>
           <th style="width: 500px;">发送数据</th>
           <th>接收数据</th>
       </tr>
       </thead>
       <tbody id="dailyDataView">
       <!--或者也可以定义在td标签中定义属性效果如下-->
	       <tr> 
				<td  style=word-wrap:break-word; width=100px>  result.rownum_  </td> 
				<td  style=word-wrap:break-word; width=100px>  result.name  </td> 
				<td  style=word-wrap:break-word; width=100px>  result.time  </td> 
				<td  style=word-wrap:break-word; width=80px>  result.status  </td> 
				<td  style=word-wrap:break-word; width=500px>  result.sendinfo  </td> 
				<td  style=word-wrap:break-word; width=500px>  result.receiveinfo  </td> 
		
	     </tr>;
       </tbody>
   </table>

3、时间的转换（将字符串转成时间类型的字符串【使用的是Oracle数据库】）
js端代码

 $("#dailyBeginTime").val() ? $("#dailyBeginTime").val() + " 00:00:00" : ""

xml映射文件中的代码（这里要注意映射文件中不能写 < 符号所以使用大写的& lt;来代替【注意：为了方便查看此处有一个空格】）

  <if test="ben != null">and tj.time > = to_date(#{ben}, 'yyyy-mm-dd hh24:mi:ss')</if>
  <if test="end != null">and tj.time &lt; = to_date(#{end}, 'yyyy-mm-dd hh24:mi:ss')</if>

dpc5517

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式的显示和隐藏等部分总结

一、首先非常感谢博主分享的笔记，此博主总结的非常的全，你们有时间可以去看看。连接如下：css样式的显示和隐藏1、根据此连接我在项目中的应用做一点补充。①、 $(’#aaa’).css(‘display’, ‘block’); 显示但是作用在按钮的时候可能会出现换行的情况，此时就需要转换成行内块元素了。要注意此方法不能作用在因为定义的id是不能被获取的。②、项目中可能会出现隐藏标签中的内...
复制链接

扫一扫

专栏目录