`

javascript 操作 css3

 
阅读更多

这个是在学习coder 宝宝css3视频教程里看到的,觉得不错,拿出来分享一下。

 function setCss3 (obj,attrObj) {
   for (var i in attrObj) {
     var newi=i;
	 if(newi.indexOf("-")>0){
	   var num=newi.indexOf("-");
	   newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
	 }
	 obj.style[newi]=attrObj[i];
	 newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
	 obj.style["webkit"+newi]=attrObj[i];
	 obj.style["moz"+newi]=attrObj[i];
	 obj.style["o"+newi]=attrObj[i];
	 obj.style["ms"+newi]=attrObj[i];
   }
  }

 

var el=document.getElementById("div");
setCss3(el,{"transform-origin":"left top",transform:"scale(1,1)"});

 

分享到:
评论

相关推荐

    web实例参考学习(javascript和css)

    或者通过JavaScript操作CSS3动画,实现复杂的过渡和变换效果。 4. **DOM操作**:JavaScript可以通过DOM API来读取、修改和添加HTML元素。实例可能包括查找元素、遍历元素树、添加和删除元素、以及改变元素的属性和...

    JavaScript 操作CSS类

    `etank.gif`可能是一个动态图,用于展示CSS类变化的效果,而`tank.html`可能是一个包含了上述JavaScript操作CSS类的实例页面。通过实际运行和观察这些示例,开发者可以更直观地理解这些方法的工作原理。 总结来说,...

    “JavaScript操作CSS”课堂教学设计.pdf

    "JavaScript操作CSS"课堂教学设计 本文主要讲述了如何在教学中Effective JavaScript操作CSS的方法。文章从HTML、CSS和JavaScript的基本概念出发,引入了JavaScript的基本概念和特点,并分析了JavaScript在Web前端...

    JavaScript 第五章 JavaScript控制CSS

    在HTML文档中,CSS用于定义元素的外观和布局,而JavaScript则提供了操作这些样式的手段。通过JavaScript,我们可以在用户与网页交互时实时更新CSS属性,如颜色、大小、位置等,从而创建出动态和响应式的用户体验。 ...

    html+javascript+css(8本chm)

    CSS3引入了许多新特性,如盒子模型改进、边框半径、渐变、阴影、动画和过渡效果,以及媒体查询实现响应式设计。 3. **JavaScript**:JavaScript是一种动态编程语言,用于实现网页的交互性和动态功能。它可以在用户...

    Learning PHP MySQL Javascript CSS and HTML5

    本书中将介绍CSS的核心概念和基础知识,例如选择器的使用、盒模型、布局技术以及如何使用CSS3增强网页的视觉效果。 ### HTML5 HTML5是最新版本的超文本标记语言,它为构建现代Web应用提供了标准化的标签和API。...

    javascript+css+html教程

    3. JavaScript核心:变量、数据类型、运算符、流程控制、函数、对象、数组、DOM操作。 4. JavaScript实践:事件处理、AJAX异步通信、JSON数据格式、ES6新特性。 5. 框架与库简介:jQuery、React、Vue等工具的用途和...

    jQuery.JavaScript与CSS开发入门经典

    CSS3是当前广泛使用的版本,引入了新的选择器、布局模型(如Flexbox和Grid)以及动画和过渡效果。 在《jQuery.JavaScript与CSS开发入门经典》这本书中,读者可以期待学习以下内容: 1. **基础概念**:理解HTML结构...

    javascript操作Div+css

    javascript操作Div和Css 网页开发必备

    Javascript和Css属性对照

    CSS3 还引入了许多新的属性,如 `transform` 实现元素的2D/3D转换,`transition` 和 `animation` 分别处理平滑过渡和动画效果。 将 JavaScript 与 CSS 相结合,可以实现动态样式修改。通过 JavaScript 的 DOM 操作...

    _爱情魔方_html_javascript_CSS3_

    在这个项目中,JavaScript可能被用来监听用户的鼠标或触摸事件,响应用户的操作,比如点击或拖动,进而驱动CSS3动画改变魔方的状态。此外,JavaScript还可以用于处理逻辑,比如验证魔方是否已被正确解决。 从压缩包...

    html javascript css 案例

    而酷炫表的实现可能涉及到JavaScript对表格数据的处理,以及CSS3的新特性,如过渡(transition)、动画(animation)等,以增强用户体验。 总的来说,这个"html javascript css 案例"提供了丰富的实践素材,涵盖了...

    Javascript、CSS压缩

    这个简单的工具"JS、CSS压缩.exe"可能就是为用户提供一个直观的界面,方便非开发者也能进行JavaScript和CSS的压缩操作。 在实际开发中,JavaScript和CSS的压缩通常结合Gzip或Brotli等服务器端的压缩算法,进一步...

    JavaScript +css3移动框架案例

    在高版本浏览器中,这些CSS3特性得到了良好的支持,能提供流畅的动画体验,而无需依赖JavaScript进行复杂的定时器操作。同时,为了保证向后兼容性,开发者通常会结合使用JavaScript和CSS3,例如,用JavaScript检测...

    Html+css+JavaScript实现的3D球面标签云效果

    如果没有使用专门的3D库,我们也可以直接操作DOM元素的样式,通过定时器更新CSS3的变换值,模拟3D动画。 在实际项目中,可能还需要考虑以下几点: 1. **响应式设计**:确保标签云在不同设备和屏幕尺寸上都能良好...

    HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip

    在HTML5和CSS3的基础上,JavaScript可以通过DOM(Document Object Model)操作页面内容,实现用户交互、数据交换、动画效果等功能。ECMAScript 6(ES6)及其后续版本引入了类、模块、箭头函数等新特性,使JavaScript...

    html5+javascript+css商城(模拟联想)购物系统

    CSS3 还支持媒体查询,使得页面能够根据设备的不同尺寸进行响应式布局,适应手机、平板和桌面等多种设备的展示。 四、信息检索与动态浏览 信息检索是商城系统的重要组成部分。利用JavaScript,可以实现关键词搜索...

    [jQuery.JavaScript与CSS开发入门经典].(约克).施宏斌等.扫描版

    此外,CSS3的新特性,如过渡、动画和Flexbox、Grid布局也会有所涉猎,这些都是现代Web设计不可或缺的部分。 本书的扫描版提供了丰富的实例和练习,帮助读者将理论知识转化为实际技能。读者可以通过跟随书中的步骤,...

    JavaScript,CSS,DHTML,DOM帮助文档(四个文件)

    CSS3引入了更多的选择器、伪类和模块,如动画、过渡、阴影、媒体查询等,使得网页设计更加丰富和灵活。 HTML(超文本标记语言)是构成网页的基础元素,它定义了网页的结构和内容。HTML5作为最新的版本,引入了许多...

Global site tag (gtag.js) - Google Analytics