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'));
}
效果图
分享到:
相关推荐
(经典塔防游戏《包围萝卜》的java仿制版).zip(经典塔防游戏《包围萝卜》的java仿制版).zip (经典塔防游戏《包围萝卜》的java仿制版).zip(经典塔防游戏《包围萝卜》的java仿制版).zip (经典塔防游戏《包围萝卜》的...
一个仿制A.T.M自动取款机的程序代码(168KB)
一个仿制A.T.M自动取款机的程序代码(168KB)
使用node.js和mysql制作的仿制博客, 使用方法:1.压缩包里为mysql文件和博客文件夹 将sql文件添加到mysql中,不会的百度 2.用命令控制台运行mysql文件夹,也就是博客文件夹,相信搜索到这个的基本都会使用node 3....
Jquery-Magazine仿制5.cn的杂志功能
通过拆解国内顶尖公司的三光两轴两框架的光电吊舱,测绘出来的三维模型,平台为Soilidworks2016,适用于相关项目研发人员的设计借鉴
王者荣耀官网仿制.rar
7881游戏交易平台整站程序源码,destoon内核仿制。
经典塔防游戏《包围萝卜》的java仿制版).zip 经典塔防游戏《包围萝卜》的java仿制版).zip 经典塔防游戏《包围萝卜》的java仿制版).zip 经典塔防游戏《包围萝卜》的java仿制版).zip 经典塔防游戏《包围萝卜》的java...
java课程设计大作业,java、算法练手项目,适合初学java、数据结构的同学拿来学习研究,基于java、GUI开发的小游戏,程序都经过测试,可以直接运行,资源含程序运行所需的源码、资源文件等全部数据,有需要的可放心...
仿制IOS 自定义选择器(Slipbutton)
Div仿制table送自定义Scrollbar支持排序,支持IE6及以上浏览器
IOS之弹窗-Swift4.2 /使用说明: 1、弹窗基类分别使用了OC和Swift来实现,同时OC和Swift版本分别实现了几个不同的弹窗效果;2、Objective-C类需要继承弹窗基类时必须选择该库的Objective-C版本中的基类;3、两个库...
2017年中国仿制药品白皮书.zip
1.示范如何创建功能表 2.仿制IE浏览器 3.动态切换功能表 4.浏览器导航 5.定位与排列技术总览 6.动态溢出设置技巧 7.使用datagridview 控件来编辑ToolStrip控件属性 8.未范如何个别设定工具栏系统控件的外观模式. 9....
唐代袒领半臂襦裙的结构分析与仿制.pdf
为了加强对JavaScript原生代码的编写能力,以及巩固setTimeout()的使用方法,制作了一个倒计时的demo,倒计时在现在的网站中算是一个常见的小功能,如果大家喜欢的话可以留下,就当作一个日常实用的小脚本。...
功能十分齐全,适合于实际开发中。一行代码调用检测手机通知权限,建议加上,大部分手机通知权限是开启的。如果关闭了,则吐司是无法显示的,但是其余部分手机,某些型号小米手机,锤子手机等就权限需要手动开启。...
使用广播机制仿制QQ强制下线功能使用广播机制仿制QQ强制下线功能有弹出框的提示
扫雷-Java完整的仿制