这个js、jq都没办法判断是否定义某个css，
这里可以提供两个解决思路：1、有人已经说了判断值是否等于0；但是这样一来会有个弊端，如果css中确实定义了margin-right:0;也会把它当做未定义处理；
2、把css写成行内样式<a style="float:left; font-size:12px;">的</a>，这样可以获取style的值再判断是否有margin-right;
$("acont a")each(function(){
var ofright = $(this)attr("style")indexOf("margin-right");
if(ofright != (-1)){alert("已定义");}
else{$(this)css({"float":"left","font-size":"12px","margin-left":"10px"});}
});
如果只有一个就不需要循环了
好吧，再给你个思路，
在css中这么定义
mr{margin-right:5px;}
pacont a{float:left; font-size:12px;}
HTML中这么写:
<p class="acont"><a class="mr">我是一匹来自北方的狼</a></p>
这个思路是通过相同样式冲突覆盖来解决的
pacont a中如果定义了margin-right就会覆盖mr中的margin-right:5px;，使之不起作用
如果未定义mr{margin-right:5px;}这个就会起作用
一下是相关代码，JS中定义的变量margin就是你所说的每个div的间距，这样你就不用去设置margin-right了。
另外，在运行我贴上的代码的时候请应用jquery类库
<style type="text/css">
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }
/瀑布流布局样式/
#lxf-box { position: relative; }
#lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; }
h3 { padding-top: 8px; }
img { width: 200px; height: auto; display: block; border: 0 }
/css3动画/
li { -webkit-transition: all 7s ease-out 1s; -moz-transition: all 7s ease-out; -o-transition: all 7s ease-out 1s; transition: all 7s ease-out 1s }
</style>
<ul id="lxf-box">
<li><a ><img /></a>
<h3>标题</h3>
</li>
<li><a ><img /></a>
<h3>标题</h3>
</li>
<li><a ><img /></a>
<h3>标题</h3>
</li>
<li><a ><img /></a>
<h3>标题</h3>
</li>
<li><a ><img /></a>
<h3>标题</h3>
</li>
<li><a ><img /></a>
<h3>标题</h3>
</li>
<li><a ><img /></a>
<h3>标题</h3>
</li>
</ul>
<script>
/
原理：1把所有的li的高度值放到数组里面
2第一行的top都为0
3计算高度值最小的值是哪个li
4把接下来的li放到那个li的下面
/
var margin = 10; //这里设置间距
var li=$("li"); //这里是区块名称
varli_W = li[0]offsetWidth+margin; //取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
function liuxiaofan(){//定义成函数便于调用
var h=[];//记录区块高度的数组
var n = documentdocumentElementoffsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块
for(var i = 0;i < lilength;i++) {//有多少个li就循环多少次
li_H = li[i]offsetHeight;//获取每个li的高度
if(i < n) {//n是一行最多的li，所以小于n就是第一行了
h[i]=li_H;//把每个li放到数组里面
lieq(i)css("top",0);//第一行的Li的top值为0
lieq(i)css("left",i li_W);//第i个li的左坐标就是ili的宽度
}
else{
min_H =Mathminapply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个
minKey = getarraykey(h, min_H);//最小的值对应的指针
h[minKey] += li_H+margin ;//加上新高度后更新高度值
lieq(i)css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
lieq(i)css("left",minKey li_W);//第i个li的左坐标就是ili的宽度
}
$("h3")eq(i)text("编号："+i+"，高度："+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
}
}
/ 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) /
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/这里一定要用onload，因为不加载完就不知道高度值/
windowonload = function() {liuxiaofan();};
/浏览器窗口改变时也运行函数/
windowonresize = function() {liuxiaofan();};
</script>
</body>
</html>
<style>
{
margin: 0%;
padding: 0%;
}
box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="/jquery-1124js"></script>
<script>
/ jQuery的链式调用 /
/ $('div')$('div')text('我是学生')css('color','red')attr({name:'zhangsan',age:30}) /
/ 链式调用的原理jq里面的方法都会return this 把当前调用者return出去实现链式调用 /
/ $('ul li')first()css('background','yellow')end()eq(1)css('background','red') /
/ 获取的只是content里面的距离,不包括padding margin border里面的距离 /
/ 返回以像素为单位的top和left的坐标,仅对可见元素有效 /
/ top和left值都会包括自己的margin和父元素border的值 /
consolelog($('div2')offset()top);
consolelog($('ul')width());
consolelog($('ul')height());
/ offsetParent 返回最近的自己定位的祖先元素 /
consolelog($('div2')offsetParent());
/ position() 返回第一个匹配元素相对于父元素的位置 /
consolelog($('div')position());
/ scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移/
/ 设置滚动条的距离 /
$(window)scrollLeft(100)
/ 获取滚动条的距离 /
$(window)scroll(function(){
consolelog($(document)scrollLeft());
})
</script>
<style>
div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
div2{
width: 200px;
height: 200px;
background-color: red;;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
<script src="/jquery-1124js"></script>
<script>
/ mouseenter mouseleave 在进入子元素区域时不会触发
mouseover 和mouseout 会触发 /
/ $('div1')mouseenter(function(){
$(this)css('background','green')
})
$('div1')mouseleave(function(){
$(this)css('background','yellow')
}) /
/ 由mouseenter 和mouseleave组成 /
$('div1')hover(function(){
$(this)css('background','yellow')
consolelog(1);
})
</script>
<style>
{
margin: 0%;
padding: 0%;
}
box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="/jquery-1124js"></script>
<script>
/ $('li:eq(0)')mouseenter(function(){
$(this)css('background','red')
})
$('li:eq(0)')mouseout(function(){
$(this)css('background','')
}) /
$('li')hover(function(){
/ css('background','')不会改变元素原来bgc样式 /
$('li')first()css('background','red')siblings()css('background','')
})
$('li:eq(1)')mouseenter(function(){
$(this)css('background','yellow')
})
$('li:eq(1)')mouseout(function(){
$(this)css('background','')
})
</script>
<style>
box{
margin: 30px auto;
width: 500px;
height: 300px;
border: 1px solid cyan;
position: relative;
}
img-list img{
width: 500px;
height: 300px;
display: block;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="img-list">
<img src="/imgs/1jpg" alt="">
<img src="/imgs/2jpg" alt="">
<img src="/imgs/3jpg" alt="">
<img src="/img/4jpg" alt="">
</div>
</div>
<button style="margin-left: 450px;" class="left">后退</button>
<button class="right">前进</button>
<script src="/jquery-1124js"></script>
<script>
/ 定时器 过2s 显示一张图 显示最后一张图的时候再跳回第一张 /
/ let i = 0
$('img')eq(0)show()siblings()hide();
setInterval(function(){
i++;
if(i==$('img')length){
i=0
} /
/ 淡入淡出 /
/ $('img')eq(i)fadeIn('slow')siblings()fadeOut('slow')
},2000) /
let i = 0;
let timer = null
$('img')eq(i)show()siblings()hide();
/ 自动播放 /
show();
$('left')click(function(){
/ 先清空定时器 阻止自动播放 /
clearInterval(timer);
i--;
/ 防止减到-1找不到对应的 /
if(i == -1){
i=$('img')length - 1
}
/ 展示当前对应的其他淡出 /
$('img')eq(i)show()siblings()hide();
/ 继续开始自动播放 /
show();
})
$('right')click(function(){
/ 先清空定时器 阻止自动播放 /
clearInterval(timer);
i++;
/ 防止减到-1 找不到对应的 /
if(i==$('img')length){
i=0
}
/ 展示当前对应的其他淡出 /
$('img')eq(i)show()siblings()hide();
/ 继续开始自动播放 /
show()
/ 定时器 过两秒 显示一张图 显示最后一张图的时候
再跳到第一张 /
})
function show(){
timer = setInterval(function (){
i++;
if(i == $('img')length){
i = 0
}
/ fadeIn 淡入 fadeOut淡出 /
$('img')eq(i)fadeIn()siblings()fadeOut();
},2000)
}
</script>
<body>
用户名:<input type="text"><br>
密码: <input type="password">
<script src="/jquery-1124js"></script>
<script>
/ 按下键盘 /
/ $('input[type=text]')keydown(function(){
alert('我按下了')
}) /
/ 抬起键盘 /
/ $('input[type=password]')keyup(function(){
alert('我抬起了')
}) /
/ keypress 连续敲击键盘 /
/ $('input[type=text]')keypress(function(){
alert('连续打字')
}) /
$(window)keyup(function(e){
if(ekeyCode==13){
alert('已提交')
}
})
</script>
</body>
首先 这不是bug 而是俩种不同动画
用 0 的时候 元素就在-40 - 0之间来回移动 因为完成一次动画是需要时间的，margin-top会慢慢改变，如果一个动作还没完成就有下一个动作产生，因为用了stop（），之前动作立马停止，可能刚刚的动作完成了一半 从0运动到-20，那么现在就是从-20运动到0；
如果是用"+=40px"，那么运动到一半产生的新动作就是0到-20；再从-20运动到+20；那就会往下走，你鼠标来回移动的越多，它的轨迹就越飘忽不定
俩者产生差距的根源在于用了stop(),你如果把stop()去掉，俩个就会表现出一致的动画效果
一、普通选择器
1标签选择器：$('p')css('background','red')；
2类选择器：$('p1')css('background','red')；
3id选择器：唯一的 只要有一个id选择器其他同名的就不生效了$('#p1')css('background','red')；
4并集选择器：$('#p1,p1')css('background','red') / 等同于下面 / $('#p1')css('background','red') $('p1')css('background','red')；
既要有p1 又要有p2 $('p1p2')css('background','red')；
5全局选择器:
属性值 支持数字和字符串 $('')css({margin:0,padding:0})
二、层次选择器
1后代选择器 ：
$('ul p')css('background','red');
2子集选择器>：
$('ul > p')css('background','red');
3相邻选择器+：用来选取紧邻目标元素的下一个元素
$('p+li')css('background','red');
4同辈选择器：用来选取目标元素之后的所有同辈元素
$('p ~ li')css('background','red');
三、属性选择器：属性选择器可以根据是否包含某属性来选取元素
1[]表示属性 选取属性是href的a标签
$('a[href]')css('color','red')；
2根据属性的值来选取元素
$('a[class=a1]')css('color','red')；
3选取不等于属性是某个特定值的元素
$('a[class!=a1]')css('color','red')；
4指定属性值以指定值开头的元素^;
$('a[href^=>
以上就是关于jquery 判断某元素是否定义了 CSS全部的内容，包括:jquery 判断某元素是否定义了 CSS、求教，如何用jQuery或其他方法实现两个div的间距设置。、jQuery链式调用、鼠标移入移出、轮播、键盘事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）