JS操作css
下面是引用的。。很不错的总结、、
引用
使用js操作css属性的写法是有一定的规律的:
1、对于没有中划线的css属性一般直接使用style.属性名即可。
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。
2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等。
这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用,这样操作是无效的。
其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器:obj.style.cssFloat。
下面是自己设计的仿制alert功能、。、
当然样式可以自己该
function showDialog(){
//var mess=document.getElementById('messageBox');
//var relTop=document.getElementById('saveBt').offsetTop;
//mess.style.top=relTop-document.body.offsetHeight+"px";
var mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "1";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
var mBox=document.createElement("div");
mBox.setAttribute("id","messageBox");
mBox.style.cssText="text-align:center;z-index:10;border:2px solid BLACK;background-color:#fff;"+"position:absolute;top:40%;left:40%;width:200px;height:100px;";
//js中这种加css方式一定要记住。。。
//head
var head=document.createElement("div");
head.className="messageBox_head";
head.innerHTML="情報";
head.style.cssText="color:#fff;text-align:left;background-color:#194586;width:200px;height:20px;"+"padding-top:3px;";
//P
var p=document.createElement("p");
p.style.cssText="margin:5px;text-align:left;";
p.innerHTML='フッタ情報は格納されます。';
//button
var mBt=document.createElement("input");
mBt.setAttribute("type","button");
mBt.setAttribute("id","mBt");
mBt.setAttribute("value","OK");
mBt.onclick=closeDialog;
mBt.text="OK";
mBt.style.cssText="color:red;margin-top:10px;";
mBox.appendChild(head);
mBox.appendChild(p);
mBox.appendChild(mBt);
window.top.document.body.appendChild(mybg);
window.top.document.body.appendChild(mBox);
}
function closeDialog(){
//alert(window.top.document.getElementById('mybg'));
window.top.document.body.removeChild(window.top.document.getElementById('mybg'));
//因为弹出窗口的触发页面是在iframe下的页面。所以得用这种方式创建、、、
//但在ie中不支持appendchild,所以这种方式暂时在ff中使用。。ie的解决办法待续、、
window.top.document.body.removeChild(window.top.document.getElementById('messageBox'));
}
效果图
分享到:
相关推荐
通过模仿微信的“发现”页界面,学习并实践了Android开发中的布局设计、控件使用以及基本的UI构建技巧。项目主要使用了TextView、ImageView和LinearLayout等控件,通过XML布局文件和Java代码实现界面的构建和功能。 ...
(经典塔防游戏《包围萝卜》的java仿制版).zip(经典塔防游戏《包围萝卜》的java仿制版).zip (经典塔防游戏《包围萝卜》的java仿制版).zip(经典塔防游戏《包围萝卜》的java仿制版).zip (经典塔防游戏《包围萝卜》的...
光电吊舱是现代航空、航天和军事领域中广泛使用的设备,它主要用于收集和处理光电信号,实现对地面目标的观察、识别、跟踪以及数据采集。这个“光电吊舱三维模型(仿制).rar”文件包含了一个由国内顶尖公司生产的...
使用node.js和mysql制作的仿制博客, 使用方法:1.压缩包里为mysql文件和博客文件夹 将sql文件添加到mysql中,不会的百度 2.用命令控制台运行mysql文件夹,也就是博客文件夹,相信搜索到这个的基本都会使用node 3....
综上所述,Div仿制table结合自定义Scrollbar和排序功能,可以提供一个既美观又功能强大的数据展示解决方案。通过熟练掌握CSS布局、JavaScript交互和兼容性处理技巧,开发者能够为用户提供更好的网页体验。在实际项目...
基于Android的内涵段子仿制应用 内容概要 本项目是一个基于Android平台的内涵段子仿制应用,旨在提供一个用户友好的平台,让用户可以浏览、发布和互动段子内容。应用包含了用户登录、注册、发布资源、评论、点赞、...
"仿制IOS 自定义选择器(Slipbutton)"是一种实现此类功能的方式,它模仿了iOS中的UISwitch按钮,通常用于二选一的操作,如开启或关闭某个功能。这种自定义控件能够增加应用的交互性和视觉一致性,尤其是在跨平台...
在Android应用开发中,"仿制QQ下线功能.zip"是一个示例项目,它演示了如何实现一个类似于QQ应用的强制下线功能。这个功能的关键在于利用Android系统的BroadcastReceiver组件来监听特定的事件,比如用户点击了“强制...
《仿制Windows扫雷游戏与自定义功能解析》 Windows扫雷是一款经典的益智游戏,深受用户喜爱。这里我们讨论的是一款完全仿照原版Windows扫雷开发的游戏,且增加了自定义功能,使得游戏体验更加丰富多样。我们将深入...
JavaWeb京东商城仿制项目
该压缩包包含的是一个模拟ATM自动取款机功能的程序代码,主要涉及计算机编程、用户界面设计以及可能的数据库交互。以下是对这些文件的详细解释: 1. `atm.bas`:这是一个Basic语言的源代码文件,很可能包含了整个...
该压缩包包含的是一个模拟ATM自动取款机功能的程序代码,主要涉及的编程语言可能是Visual Basic(VB),因为`.bas`文件是VB的基本模块文件。从给出的文件名来看,我们可以推测这个程序可能由以下几个部分组成: 1. ...
在这个项目中,开发者利用了开源社区的智慧和成果,进行了二次开发,从而实现了一些创新的功能。 首先,项目的重点是创建一个可自定义的滚动视图,它可以响应用户的下拉和上拉手势。在用户下拉时,视图中的图片会...
在Android中,自定义控件通常通过继承已有的View或ViewGroup类来创建,然后重写其onDraw()方法以绘制自己的UI,或者添加额外的方法和属性来扩展功能。在这个项目中,开发者可能从ScrollView或HorizontalScrollView...
在《王者荣耀》官网仿制中,前端可能需要实现游戏新闻展示、角色介绍、赛事信息、玩家社区等功能。这些功能可能需要与后端API接口进行交互,获取和提交数据。 后端开发则涉及服务器端的编程,通常使用Java、Python...
"仿制Outlook菜单 js"项目就是这样一个例子,它使用JavaScript语言来实现类似Outlook的左侧菜单导航,适用于小型项目的后台管理系统界面。 JavaScript(简称JS)是Web开发中常用的脚本语言,主要负责客户端的动态...
在本文中,我们将深入探讨如何使用JavaScript来仿制天猫网站左边的导航条特效。这个专题主要涉及前端开发中的HTML结构、CSS样式以及JavaScript交互逻辑,是网页动态效果实现的重要组成部分。 首先,我们要理解天猫...
JavaScript仿制的`<marquee>`标签走马灯效果是一种常见的网页动态展示技术,它能够模仿HTML中的`<marquee>`元素,使文本或图片在网页中不断滚动或左右滑动,为用户带来动态视觉体验。`<marquee>`是HTML4的一个非标准...
6. **动画与过渡**:CSS3的transition和animation属性可以创建平滑的过渡效果和自定义动画,提升用户体验。在QQ会员界面上,可能会用到这些特性来实现按钮悬停效果、下拉菜单展开等动态交互。 7. **伪类和伪元素**...
在"jquery-magazine-master"这个压缩包中,我们可以找到项目的源代码文件,包括HTML、CSS和JavaScript,以及可能的图片和其他资源。通过深入研究这些文件,开发者可以学习到如何利用jQuery实现类似的动态杂志效果,...