css样式的动态添加及显示和隐藏等零碎用法
发布时间：2014-04-01 17:15:10 作者：佚名 
我要评论
我要评论css样式，想必很多从事网页布局的朋友对它很熟悉吧，常见的用法就不说了，本文主要为大家介绍下css样式的零碎用法包括样式的动态添加及样式的显示和隐藏等等，喜欢的朋友可以参考下
样式的动态添加：
（其中红色字体是动态添加样式的语句），这是一个动态生成无序列表的函数，用来显示搜索到的wifi信号，其中有3个参数，wifi的名称、加密方式、信号强度。
// create a network list item
function newListItem(network, averageSignalStrength) {
/**
* A Wi-Fi list item has the following HTML structure:
* <li>
* <div>"signalStrength"+ dbm</div>
* <small> Network Security </small>
* <a [class="wifi-secure"]> Network SSID </a>
* </li>
*/
// ssid
var _ = navigator.mozL10n.get;
var ssid = document.createElement('a');
ssid.textContent = network.ssid;
var div = document.createElement('div');
<span style="color:#FF0000;">var str_css ="position: absolute;left: 50%; right: 3rem; top: 45%; padding-top: 0.4rem; font-size: 1.4rem; color: #505859; pointer-events: none;";</span>
<span style="color:#FF0000;">div.style = str_css;</span>
if (!averageSignalStrength)
div.textContent = 'strength:'+ network.signalStrength + 'dbm';
else
div.textContent = 'strength:'+ averageSignalStrength + 'dbm';
// supported authentication methods
var small = document.createElement('small');
var keys = network.capabilities;
if (keys && keys.length) {
small.textContent = _('securedBy', { capabilities: keys.join(', ') });
small.textContent = keys.join(', ');
} else {
small.textContent = _('securityOpen');
small.dataset.l10nId = 'securityOpen';
}
// create list item
var li = document.createElement('li');
li.appendChild(div);
li.appendChild(small);
li.appendChild(ssid);
return li;
}
样式的显示和隐藏：
遍历标签 exp = document.getElementById("exp");
隐藏标签 exp.style.display = "none";
显示标签 exp.style.display = "list-item";
Padding 属性定义元素边框与元素内容之间的空间。
padding 简写属性在一个声明中设置所有内边距属性。设置所有当前或者指定元素内边距属性。该属性可以有1到4个值
<span style="font-size:14px;">语法结构
padding-top:20px;上内边距
padding-right:30px;右内边距
padding-bottom:30px;下内边距
padding-left:20px;左内边距
padding:1p四边统一内边距
padding:1px1px上下,左右内边距
padding:1px1px1px上,左右,下内边距
padding:1px1px1px1px上,右,下,左内边距</span>
（其中红色字体是动态添加样式的语句），这是一个动态生成无序列表的函数，用来显示搜索到的wifi信号，其中有3个参数，wifi的名称、加密方式、信号强度。
复制代码
代码如下:// create a network list item
function newListItem(network, averageSignalStrength) {
/**
* A Wi-Fi list item has the following HTML structure:
* <li>
* <div>"signalStrength"+ dbm</div>
* <small> Network Security </small>
* <a [class="wifi-secure"]> Network SSID </a>
* </li>
*/
// ssid
var _ = navigator.mozL10n.get;
var ssid = document.createElement('a');
ssid.textContent = network.ssid;
var div = document.createElement('div');
<span style="color:#FF0000;">var str_css ="position: absolute;left: 50%; right: 3rem; top: 45%; padding-top: 0.4rem; font-size: 1.4rem; color: #505859; pointer-events: none;";</span>
<span style="color:#FF0000;">div.style = str_css;</span>
if (!averageSignalStrength)
div.textContent = 'strength:'+ network.signalStrength + 'dbm';
else
div.textContent = 'strength:'+ averageSignalStrength + 'dbm';
// supported authentication methods
var small = document.createElement('small');
var keys = network.capabilities;
if (keys && keys.length) {
small.textContent = _('securedBy', { capabilities: keys.join(', ') });
small.textContent = keys.join(', ');
} else {
small.textContent = _('securityOpen');
small.dataset.l10nId = 'securityOpen';
}
// create list item
var li = document.createElement('li');
li.appendChild(div);
li.appendChild(small);
li.appendChild(ssid);
return li;
}
样式的显示和隐藏：
遍历标签 exp = document.getElementById("exp");
隐藏标签 exp.style.display = "none";
显示标签 exp.style.display = "list-item";
Padding 属性定义元素边框与元素内容之间的空间。
padding 简写属性在一个声明中设置所有内边距属性。设置所有当前或者指定元素内边距属性。该属性可以有1到4个值
复制代码
代码如下:<span style="font-size:14px;">语法结构
padding-top:20px;上内边距
padding-right:30px;右内边距
padding-bottom:30px;下内边距
padding-left:20px;左内边距
padding:1p四边统一内边距
padding:1px1px上下,左右内边距
padding:1px1px1px上,左右,下内边距
padding:1px1px1px1px上,右,下,左内边距</span>
相关文章
- 下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-24
- 这篇文章主要介绍了如何利用css的样式对文本进行隐藏和显示等操作，需要的朋友可以参考下2014-05-08
- 这篇文章主要介绍了css样式怎么显示省略号，即当超过自定义宽度时隐藏显示省略标记，比较实用，需要的朋友可以参考下2014-04-18
- 显示隐藏一个div特效的方法有很多，下为大家介绍下使用纯css3是如何实现的，感兴趣的朋友可以参考下2014-02-10
- 文字的显示和隐藏，在某些时候还是比较实用的，可能对于初学者有些难度，下面为大家简单介绍下具体的实现，感兴趣的朋友可以参考下2013-08-18
- 随着CSS3的发布，国外研究正如火如荼，但在国内还有很多人抱着IE不支持CSS3的想法，始终无动于衷不肯去学习。2010-12-18
从A页面连接到B页面后并直接把B页面的隐藏层显示-CSS教程-网页制作-网
这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时2008-10-17- 本文给大家介绍了css实现隐藏和显示功能的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，有需要的朋友可以参考下2016-07-01
最新评论