<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tank</title>
<style type="text/css">
<!--
#myTank {
width:40px;
height:40px;
left:200px;
top:200px;
background-image: url(etank.gif);
background-position:0px 80px;
position:absolute;
}
.over{
background:#000000;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
filter: Alpha(Opacity=40);
Opacity:0.7;
}
li{
width:40px;
height:40px;
background-image: url(etank.gif);
}
li:hover {
width:40px;
height:40px;
background-image: url(etank.gif);
background-position: 0px 40px;
}
.run {
background-color: #FFFFFF;
height: 200px;
width: 200px;
border: 2px dotted #0000FF;
position: relative;
visibility: visible;
}
-->
</style>
<script language="javascript" language="javascript">
function onInit(){
var runDiv = document.getElementsByTagName('div')[0];
if(runDiv.currentStyle){
alert("IE: "+ runDiv.currentStyle["backgroundColor"]);//只读
}else{
alert("FireFox : "+ document.defaultView.getComputedStyle(runDiv,false)["backgroundColor"]);
}
var cssTag = getstyle(".run");
cssTag.backgroundColor = "#000000";
}
function getstyle(sname) {//查找Css 类 注名称为(.run 全称)
for (var i=0;i<document.styleSheets.length;i++) {
var rules;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i].cssRules;
} else {
rules = document.styleSheets[i].rules;
}
for (var j=0;j<rules.length;j++) {
if (rules[j].selectorText == sname) {
return rules[j].style;
}
}
}
}
</script>
</head>
<body onload="onInit();">
.over CSS 使用滤镜
<div class="over"></div>
<div id="myTank"/>
<br>
li 的伪类
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.run CSS 类 onload 时被修改
<div class="run"/>
</body>
</html>
分享到：
相关推荐
"JavaScript操作CSS"课堂教学设计 本文主要讲述了如何在教学中Effective JavaScript操作CSS的方法。文章从HTML、CSS和JavaScript的基本概念出发，引入了JavaScript的基本概念和特点，并分析了JavaScript在Web前端...
在控制CSS的过程中，我们还可以使用CSS类来组织样式。JavaScript可以添加或移除元素的类，从而改变元素的外观。例如： ```javascript element.classList.add('highlight'); element.classList.remove('hidden'); ``...
此外，JavaScript还有许多库和框架，如jQuery简化DOM操作，React用于构建用户界面，Vue.js提供组件化开发。 4. **ASP (Active Server Pages)**：ASP是微软的一种服务器端脚本环境，用于创建动态交互式网页。在ASP中...
2. CSS进阶：盒模型、布局技术（如Flexbox和Grid）、响应式设计、选择器和伪类、过渡和动画。 3. JavaScript核心：变量、数据类型、运算符、流程控制、函数、对象、数组、DOM操作。 4. JavaScript实践：事件处理、...
5. DOM操作：了解如何使用JavaScript操作DOM节点，包括创建、删除、查找和修改元素。 6. 事件处理：理解事件冒泡、事件捕获和事件委托，以及如何绑定和移除事件监听器。 7. AJAX使用：测试异步请求的编写和数据处理...
javascript操作Div和Css 网页开发必备
《jQuery.JavaScript与CSS开发入门经典》是一本旨在引导初学者进入前端开发领域的书籍，它涵盖了Web开发中三个至关重要的技术：jQuery、JavaScript和CSS。这三者是构建交互式和动态网页的基础，也是现代Web开发的...
通过 JavaScript 的 DOM 操作，我们可以实时改变元素的 CSS 属性。例如： ```javascript let myElement = document.querySelector('#myElement'); myElement.style.backgroundColor = 'red'; // 改变背景色 ...
本书名为《Learning PHP, MySQL, JavaScript, CSS & HTML5》，主要针对初学者，全面介绍了与Web开发相关的几项核心技术。书中涉及的主题包括PHP服务器端脚本语言、MySQL数据库系统、客户端JavaScript脚本、CSS层叠...
或者通过JavaScript操作CSS3动画，实现复杂的过渡和变换效果。 4. **DOM操作**：JavaScript可以通过DOM API来读取、修改和添加HTML元素。实例可能包括查找元素、遍历元素树、添加和删除元素、以及改变元素的属性和...
注册和登录页面的样式设计可能涉及到颜色、字体、边框、阴影等属性的设置，以及CSS选择器的使用，如类选择器（.class）、ID选择器(#id)和伪类选择器(:hover、:active等)，来实现不同的视觉效果。 在这个案例集中，...
这个简单的工具"JS、CSS压缩.exe"可能就是为用户提供一个直观的界面，方便非开发者也能进行JavaScript和CSS的压缩操作。 在实际开发中，JavaScript和CSS的压缩通常结合Gzip或Brotli等服务器端的压缩算法，进一步...
《jQuery、JavaScript与CSS开发入门经典》是一本旨在引导初学者进入前端开发领域的权威指南，由施宏斌等专家合著。这本书详细介绍了这三种关键技术的基础知识和实践应用，为读者构建坚实的Web开发基础。 首先，...
CSS3引入了更多的选择器、伪类和模块，如动画、过渡、阴影、媒体查询等，使得网页设计更加丰富和灵活。 HTML（超文本标记语言）是构成网页的基础元素，它定义了网页的结构和内容。HTML5作为最新的版本，引入了许多...
《HTML5+JavaScript+CSS 商城（模拟联想）购物系统详解》 HTML5、JavaScript 和 CSS 是构建现代网页和应用程序的三大核心技术。本项目“HTML5+JavaScript+CSS 商城（模拟联想）购物系统”充分利用这三种技术，打造...
【php+html+javascript+css教程】是一套全面的编程学习资源，涵盖了Web开发中的四大核心技术：PHP、HTML、CSS和JavaScript。这些技术是构建动态、交互式网站的基础，广泛应用于现代互联网应用的开发。 PHP...
"css2.0-zwsc.chm"可能会详细讲解选择器的使用，包括类选择器、ID选择器、元素选择器等，以及盒模型、定位、浮动等布局技术。CSS3的引入带来了更多的动画、过渡和变换效果，以及媒体查询等响应式设计功能，使得CSS在...
JavaScript.chm文件可能包含了JavaScript语法、对象、函数、DOM操作、BOM（浏览器对象模型）以及AJAX（异步JavaScript和XML）等内容。JavaScript在网页中的应用广泛，从表单验证到动态内容更新，再到复杂的数据可视...
- 性能优化：减少DOM操作，使用CSS动画而非JavaScript动画，合理利用缓存等。 8. **学习资源**： - MDN Web Docs：提供详尽的JavaScript和CSS参考文档。 - W3Schools：在线学习平台，提供教程和实例。 - ...