css相关 随手记

1.获取div下面第一个span里面的值。
id: $(’#thisDiv’).children(“span”).eq(0).text();
class: $(’.thisClass’).children(“span”).eq(0).text();
获取其他元素将span替换为其他元素，获取第二个将0替换为1

 var text= $('.r-middle-one1').children("span").eq(0).text();
 console.log("text", text);

根据id或者class获取当前元素的文本

id:  $('#thisDiv').text();
class: $('.thisClass').text();

获取元素的值

var queryStartDate = $("#queryStartDate").val();
var queryEndDate = $("#queryEndDate").val();

2.给标签赋值的方法

document.getElementById("name").innerText = "hello world";
document.getElementById("name").innerHTML = "<span>hello world</span>";

3.给元素赋值（宽，高等）

var div=document.getElementById("startOne");
 div.style.height=(50)+"%";
 div.style.width=(60)+"%";

给img标签添加元素

$('#select div>img').attr("src", "/images/homepage/open.png");
$("#img").attr("src","/images/wechat/button_sub.png");

控制元素的显示与隐藏

 $('#noData').css("display","block");
 $('#tableData').css("display","none");

$('.page').show();
$('.no-data').hide();

根据id给某元素添加样式/移除样式

 $('#date').removeClass('r-date');
 $('#date').addClass('r-date');

4.超过宽度/高度自动加滚动条，设置滚动条样式。
文本过多，超出固定高度，没有滚动条时

超出高度自动添加滚动条：overflow-y:auto;

设置滚动条样式

<style>

	::-webkit-scrollbar {
		width: 8px;
	}
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
	}
</style>

隐藏滚动条

<style>

	::-webkit-scrollbar {
		width: 8px;
	}
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
	}
</style>

注意：::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.
链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar