您的位置：首页 > Web前端 > JavaScript

从零开始前端学习[47]:如何使用javascript来操作行内样式或者属性浅析

2017-11-09 21:28 811 查看

如何使用javascript来操作行内样式或者属性

使用javascript来操作行内样式，或者标签固有属性

提示

博主:章飞_906285288

博客地址：http://blog.csdn.net/qq_29924041

使用javascript来操作行内样式，或者标签固有属性

我们知道，html是结构层，css是样式层，而js则是行为层，一个页面的样式控制主要是css来进行控制的，而在css中样式的引入又包括了外部引用，内部引用，或者行内样式等，但是这些样式都是通过样式属性来进行的。

内部样式或者行内样式都是写在style标签内的，而一般对于js所操纵的样式，一般情况下暂且可以理解为行内样式，那什么是行内样式呢？？？行内样式是写在左标签内部的样式，通过style来引入，

如下所示:
<p class="fl_l" id="innerHTML_2" style="font-size: 20px;color: red;background: blue;text-align: center;">innerHTML_2</p>

并且行内样式也是最高的。

那怎么进行操作的呢？如下所示语法：

语法：对象.style.css属性 = ""; 如果有“-”就要用驼峰命名（把减号去掉，减号后面的第一个字母大写，如backgroundColor）
如：
var box = document.getElementById("box");
box.onclick = function(){
box.style.backgroundColor = '#999';
}

注意在js中引用的时候是不存在有中间的”-“的，同样的，其属性值与原来基本上也是一致的，并没有太大区别。

注意其在引用的时候是需要先引入style的。

关于通过js浮动的一点简单介绍：

在我们的前端里面我们都知道兼容很恼火，这里的浮动就有一个兼容问题，首先，在js里面我们不能直接这样子写

oBox.style.flaot = "right" 错误的写法

因为flaot是关键字，虽然在谷歌里面这样写也可以这样子写，但是，我们也不能这样子写，比如c++里面是代表浮点型，所以我们用其他的代替，还有我们的class也是保留字要用className代替

所以在google里面的话：

oBox.style.cssFloat = 'right';

而在低版本的浏览器中的话:

oBox.style.styleFloat = 'right';

最重要的还有父级元素坍塌问题的思考，因为在你设置了浮动之后，如果不去清除浮动，势必会造成父级元素的坍塌的现象，这个时候你必须要清除浮动，

parent.setAttribute("class",'clearfix');  /*设置类属性来消除掉父级坍塌事件**/

具体会通过代码的形式来展示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 800px;margin: 40px auto;box-shadow: 0 0 10px 0 deeppink}
p{width: 200px;height: 200px;box-shadow: 0 0 10px 0 blue;margin: 10px}
.clearfix:after{
display: block;
content:"";
clear: both;
}
</style>
</head>
<body>
<div class="main">
<div class="compare1" id="parent">
<p  id="innerHTML_1">1</p>
<p  id="innerHTML_2">2</p>
</div>
</div>
<script>
var parent = document.getElementById("parent");
var p1 = document.getElementById("innerHTML_1");
var p2 = document.getElementById("innerHTML_2");

p1.onmouseover = function () {
p1.style.backgroundColor = 'blue';
p1.style.color = "red";
}
p1.onmouseout = function () {
p1.style.backgroundColor = 'deeppink';
p1.style.color = "#334499";
}
p2.onmouseover = function () {
p2.style.fontSize = "26px";
p2.style.textAlign = "center";
}
p2.onmouseout = function () {
p2.style.textAlign = "right";
}

parent.onclick= function () {
parent.style.color = "red";  /*修改字体颜色属性**/
p1.style.cssFloat = "left";  /*google浏览器让其进行浮动*/
p1.style.styleFloat = "left"; /*低版本的情况下，浮动*/
p2.style.cssFloat = "left";
p2.style.styleFloat = "left";
parent.setAttribute("class",'clearfix');  /*设置类属性来消除掉父级坍塌事件**/console.log("======");
}
</script>
</body>
</html>

显示如下所示:

注意修改行内样式的时候，需要用到.style.cssXXX，浮动相关的样式修改的话，这个时候是有区别的还，再就是浮动的时候需要清除浮动

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js修改内部样式 js浮动 js清除浮动

相关文章推荐

新的分享

章节导航