JavaScript小结

最新推荐文章于 2021-01-23 16:33:11 发布
最新推荐文章于 2021-01-23 16:33:11 发布
阅读量411 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stwstw0123/article/details/49307157
版权

js获取html元素style

function getAttrStyle(obj, attr){  
    if(obj.currentStyle){  
        return obj.currentStyle[attr];  
    }else{  
        return document.defaultView.getComputedStyle(obj,false)[attr];  
    }  
}

getElementByClassName

var getElementsByClassName = function (searchClass, node,tag) {
  if(document.getElementsByClassName){
    var nodes =  (node || document).getElementsByClassName(searchClass),result = [];
      for(var i=0 ;node = nodes[i++];){
        if(tag !== "*" && node.tagName === tag.toUpperCase()){
          result.push(node)
        }else{
          result.push(node)
        }
      }
      return result
    }else{
      node = node || document;
      tag = tag || "*";
      var classes = searchClass.split(" "),
      elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
      patterns = [],
      current,
      match;
      var i = classes.length;
      while(--i >= 0){
        patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
      }
      var j = elements.length;
      while(--j >= 0){
        current = elements[j];
        match = false;
        for(var k=0, kl=patterns.length; k<kl; k++){
          match = patterns[k].test(current.className);
          if (!match)  break;
        }
        if (match)  result.push(current);
      }
      return result;
    }
  }

CSS Position:absolute and Relative and fixed

在position属性值为absolute的同时，如果有一级父对象（无论是父对象还 是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位

如果在position属性值为fixed，那么这个元素是相对于窗口的，浏览器窗口。它不随滚动条等改变。但是如果当前浏览器太小时候，元素会显示不出来。

css经典布局——头尾固定高度中间高度自适应布局

CSS 中 html, body的top从 0 改为 50px，再看看效果

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf8">
            <title>头尾固定中间高度自适应布局</title>
            <style>
                html, body {
                    height:100%;
                    margin:0;
                    padding:0;
                    position:relative;
                    top:0;
                }
            #dHead {
                height:100px;
                line-height:100px;
                background:#690;
                width:100%;
                position:absolute;
                z-index:5;
                top:0;
                text-align:center;
            }
            #dBody {
                background:#FC0;
                width:100%;
                overflow:auto;
                top:100px;
                position:absolute;
                z-index:10;
                bottom:100px;
            }
            .mycontent {
                padding:20px;
            }
            #dFoot {
                height:100px;
                line-height:100px;
                background:#690;
                width:100%;
                position:absolute;
                z-index:200;
                bottom:0;
                text-align:center;
            }
            </style>
    </head>

    <body padding="50px" position=“relative”>
        <div id="dHead">固定头部100px;</div>
        <div id="dBody">
            <div class="mycontent"> 中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
                中间自适应部分<br>
            </div>
        </div>
        <div id="dFoot">固定尾部100px</div>
    </body>
</html>

参考

http://lzhw1985.iteye.com/blog/1633963
http://www.zhixing123.cn/asp/35835.html
http://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html

stwstw0123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初识Javascript小结
10-23
本文是一个学习javascript的新手总结的一些关于javascript的方法，有需要的小伙伴可以参考下。
javascript对象小结
10-29
次主要测试了几个主要的对象，包括string,date,数组。用date对象做了个类似倒计时的功能，呵呵
javascript小结
dudu_aa的博客
08-28 507
一、变量（算术运算符，逻辑运算符等）二、数组(二维数组)var myarr=new Array();三、控制语句四、函数function add2(x,y){sum=x+y;return sum;}五、事件响应，让网页交互六、内置对象Date对象String字符串对象 stringObject.charAt(index)返回指定位置的字符 stringObject.indexOf(substring
javascript 一些用法小结
10-29
以下是对提供的JavaScript用法小结的详细解释： 1. **事件处理**： - `onclick` 是一个JavaScript事件处理属性，用于当用户点击某个元素时执行指定的函数。例如：`onclick="javascript:allselect()"`。 - 另一种...
Javascript小结
Junemarry的博客
12-26 233
JS第四章 1、动态的属性 var person=newobject(); person.name=“Nicholas”; alert(person.name);// “Nicholas” 只能给引用类型值动态的添加属性。 2、复制变量值 var num1=5; var num2=num2; 两个变量可以参与任何操作而不会相互影响。 Var obj1=new object();
JavaScript小结整理
小吴同志的博客
01-23 226
js一直捡捡丢丢，随着年纪的增长，金鱼记忆大师的特征也越来越明显。与其每次都上网这里那里找资料，不如自己整理一个简单适用自己的。 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。开发工具就是编辑器+浏览器。以前流行sublime+Google浏览器自带V8引擎。现在我习惯用VScode编辑器+node（js脚本运行环境，现在都集成n
JavaScript学习小结
weixin_43957392的博客
11-19 128
JavaScript的发展历史 最初由王景公司研发一门叫做LiveScript，后与sun合作并将语言名字改为了JavaScript同时微软在JavaScript基础上研发了直接的Jscript JavaScript的简介 JavaScript是一门基于客户端的脚本编程语言（简称JS） 客户端：客户只需要下载浏览器，浏览器内置了JavaScript执行的引擎 特点 ： 解释性 基于对象 事件驱动 跨平台 安全性 作用： 交互式操作 表单验证 网页特效 W..
Javascript总结
个人工作心得
11-06 638
DocumentFragment：文档碎片，它不会产生任何标签，只是一个载体: var df = document.createDocumentFragment(); for(var i=0;i5;i++){   var bullet = new Bullet();   df.appendChild(bullet); } document.body.appendChild(df);
JavaScript 总结
qqyouhappy的博客
10-20 7915
avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 ECMAScript，描述了该语和基本对象。 文档对象模型（DOM），描述处理网页内容的方法和接口。 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。  什么是原型？ 原型是一个对象，其他对象可以通过它实现属性继承。 在JavaScript中，当
JavaScriptES6语法小结
非鹭千里
10-14 5037
-ES6语法总结功能整理 回调函数： //ES6 array.forEach(v = > console.log(v)); 重写父类构造方法(功能复用)： //通过对象字面量创建对象 var human = { breathe() { console.log('breathing...'); } }; var worker = { __proto__: human, //设置
javaScript小结
变是永远不变的......
08-26 1246
初识javaScript，并不感到陌生，因为在牛腩新闻发布中已经用过，在针对性的学习这块儿的时候，其实感觉和学VB是一样的，就是属性、事件、方法，再新的就是正则表达式，看师哥师姐的博客，也有所耳闻，所以学起来的话，用超哥的话“so easy”。下面对这块儿做个总结。       一、概念              JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
Javascript本地存储小结
weixin_34168700的博客
11-16 106
前言 总括：详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法。 人生如画，岁月如歌。 原文博客地址：Javascript本地存储小结 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书） 1. 各种存储方案的简单对比 Cookies：浏览器均支持，容量为...
javascript -- 初步学习总结
哔...的博客
08-07 1442
Javascript 语法 JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{…}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。 缩进不必要 //为注释，/**/也是 变量类型:number sring bool Array object ==自动转换数据类型比较 =...
javascript实现成绩统计小结
最新发布
04-10
好的，关于javascript实现成绩统计小结，我可以给您提供一些参考意见。JavaScript是一种面向对象、弱类型的编程语言。在实现成绩统计方面，您可以使用JavaScript的一些基本语法来实现，例如使用数组来保存成绩数据，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值