您好，使用原生js获取
一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，
返回的是一个CSS样式声明对象 ， 只读， 此方法支持Firefox浏览器;
语法：var style=windowgetComputedStyle(“元素”，“伪类”);第一个参数是必须的，第二个为可选的。
二、currentStyle 是一款可以兼容IE浏览器的属性返回的是当前所有最终使用的CSS属性值，
利用elementCurrentStyleattribute可获取
其与getComputedStyle区别：1、 currentStyle不支持伪类样式获取；
2、currentStyle不支持现代浏览器，支持IE
原生JS中如何获取CSS属性中的值
1、JavaScript允许你更改元素的class或id。当你更改之后，浏览器会自动更新元素的样式。
2、是className，可不是class
注意：JavaScript使用的是className去访问class属性，因为class是一个保留关键字，因为将来JavaScript可能开始支持像Java一样的类。
可以用CSS3 的transform跟transtion去做，
具体的就是先写好一个class，里面有一些元素的状态改变。
然后编写一个增加class跟删除class的 *** 作就好了
很简单 需要三个事件 onmousedown onmousemove onmouseup
并给需要拖动的节点增加一个属性叫droping(这个属性表示节点是不是正处于拖拽状态)下面给出一份演示
onmousedown 控制节点扩展的属性droping为true(表示可以移动节点了)
onmousemove 控制节点的位置(判断是否可以移动如果是就移动)
ommouseup控制节点的扩展属性为false(表示不能移动节点了)
<!DOCTYPE HTML><html>
<head>
<title>演示</title>
<style type="text/css">
</style>
</head>
<body>
<div id="dropDiv">
我可以拖动
</div>
<script type="text/javascript">
function dropDivFun(Element){
//设置节点的定位为fixed
Elementstyleposition="fixed";
//获取事件对象函数 方便获取事件的clientX
function getEvent(){
if(event){
e=event;
}else if(windowevent){
e=windowevent;
}else{
e=argumentscalleearguments[0];
}
return e;
}
//添加mousedown事件
ElementaddEventListener("mousedown",function(){
var e=getEvent();
if(!Elementdroping){
//设置droping为true并记录初始的位置
Elementdroping=true;
Elementstart_x=eclientX-ElementoffsetLeft;
Elementstart_y=eclientY-ElementoffsetTop;
}
});
ElementaddEventListener("mousemove",function(){
var e=getEvent();
//移动节点
if(Elementdroping){
Elementstyleleft=eclientX-Elementstart_x+"px";
Elementstyletop=eclientY-Elementstart_y+"px";
}
});
ElementaddEventListener("mouseup",function(){
if(Elementdroping){
//设置droping为false并释放初始的变量
Elementdroping=false;
Elementstart_x=null;
Elementstart_y=null;
}
});
}
//为节点添加drop事件
dropDivFun(documentgetElementById("dropDiv"));
</script>
</body>
</html>
该演示演示了使用原生js给节点拖动
$(document)ready(function(e) {
$("#navbtn")click(function(e) {
if($(this)css("transform")=="none"){
$(this)css("transform","rotate(0deg)");
}
var element = documentgetElementById("test")styletransform;
var deg=elementsplit("rotate(")[1]split("deg)")[0];
$(this)css("transform","rotate("+(Number(deg)+90)+"deg)");
});
});
匹配多个指定位置，并且要修改，那你就只有先用for循环把每个标签的style获取到，然后使用正则表达式来进行搜索，匹配到你需要的这个90deg，替换成0就行了。关键是正则你要考虑全面
以上就是关于原生JS中如何获取CSS属性中的值全部的内容，包括:原生JS中如何获取CSS属性中的值、怎样通过js 动态设置transform-origin的属性、怎样用原生JS去实现jq的slideToggle等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）