模拟jq的设置样式

//需求,创建一个div,添加到页面上,给div添加属性
//面向对象开发,构造函数创建类
function divTag(){
this.div1=document.createElement(‘div‘);
this.appendTo=function(node){
node.appendChild(this.div1);
return this;//将构造函数的new的新对象返回,因为它里面有这两个方法,所以才能链式操作
}
this.css=function(obj){
for(var k in obj){
this.div1.style[k]=obj[k];
};
return this;//将构造函数的new的新对象返回,因为它里面有这两个方法,所以才能链式操作
};
}

//实例化
var div =new divTag();
div.css({
‘border‘:‘1px dotted red‘,
‘width‘:‘100px‘,
‘height‘:‘200px‘
}).appendTo(document.body);

时间: 2024-08-15 15:26:39

模拟jq的设置样式的相关文章

学习04-jq(jq的使用,jq的入口函数,jq与DOM的转换,基本选择器,层级选择器,设置样式,筛选选择器,筛选方法)

jq的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <scrip

css3模拟jq点击事件

还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签,让radio覆盖在a上,那为什么不直接 把 a放在radio上面呢?因为选择器 + 好选择嘛,用radio的功能,a来修饰按钮样式,再把radio 隐藏,这里要用opacity(透明度) 这就是,主要原理! 上视图吧 <!DOCTYPE html> <html>

Android中ActionBar以及menu的代码设置样式

Android中ActionBar以及menu的代码样式如何设置?今天麦子学院android开发老师主要介绍Android中ActionBar以及menu的代码设置样式,,有需求的朋友可以参阅下 menu有些xml代码 http://schemas.android.com/apk/res/android"> <="" div=""> android:title="查找1" android:orderInCategory

【温故而知新-Javascript】为DOM元素设置样式

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleSheet 对象代表,它提供了一组属性和方法来操作文档里的样式. 1.1 获得样式表的基本信息 第一步是获得定义在文档中的样式表的一些基本信息. <!DOCTYPE html> <html lang="en"> <head> <meta charse

Vue系列: 如何通过组件的属性props设置样式

比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components.html#Props 所以我在该组件的内部添加了mapHeight属性,如下: props:{ // 地图在该视图上的高度 mapHeight:{ type: Number, default: 200 } } 然后要在地图的div中通过样式设置该div的高度,,可以有以下三种方式: 第一种: <d

css如何匹配第几个li元素并设置样式

css如何匹配第几个li元素并设置样式:如果有一个li元素列表,如果想设置指定位置li的样式.这个在以前可能需要稍微麻烦一些,比如在这个要设置的li元素上添加一个class或者id之类.但是上面的方式不够灵活,下面介绍一下如何通过伪类选择器实现此功能.代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" con

JavaScript通过ID和name设置样式

JavaScript通过ID和name设置样式 1.说明 (1)依据所提供的元素的id值,返回对该元素的引用或节点 document.getElementById("tr_th") (2)依据參数中的标记,返回对一组元素的引用或节点 document.getElementsByTagName("td") 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

【使用 DOM】为DOM元素设置样式

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>为DOM元素设置样式</title> <style title="core st

css实现的文本框focus获取焦点设置样式代码实例

css实现的文本框focus获取焦点设置样式代码实例:文本框获取焦点然后设置它的css样式通常可以使用javascript代码.具体可以参阅javascript实现的文本框获取焦点设置其样式代码一章节.其实使用纯css也能够实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=