利用js重新排版页面

帮朋友写的重写排版页面
有几个地方可以记录下来便于以后复习
1、利用document.getElementsByClassName(‘video-img’)[0].childNodes[1].childNodes[0]的方式找到没有id值的节点，并通过setAttribute(“id”, “SubName”)方法加上id，便于后续的操作。
2、修改图片的尺寸要先修改所在div的尺寸，再修改图片本身的尺寸
3、最后遍历p标签，获取正文的内容

$(document).ready(function () {//改变图片的样式大小if (true) {//先删除原有的ul，只留下一个ul便于后续排版$("ul.category").remove();$("ul.comment").remove(); //评论和观看用的是相同class$("ul.date").after("<ul>haha</<ul>");$("ul.date").after("<ul>haha</<ul>");$("ul.date").after("<ul>haha</<ul>");$("ul.date").after("<ul>haha</<ul>");$("ul.date").after("<ul>haha</<ul>");$("div.videos-content").after('<ul id="FilmName" style="line-height: 40px;margin: 0 35px 13px 0;padding: 0 0 0 15px;border: 1px solid #ddd;">适配电影：</<ul>');$("div.videos-content").after('<ul id="SubUrl" style="line-height: 40px;margin: 0 35px 13px 0;padding: 0 0 0 15px;border: 1px solid #ddd;"><sapn>下载链接：<a id="UrlBaidu"></a></span><sapn id="PwdBaidu"></span></<ul>');//$("<li>new li</li>").prependTo("ul");}$("div.video-img").height(355);//终于找到了图片的位置console.log(document.getElementsByClassName('video-inf')[0].childNodes);var imgfile = document.getElementsByClassName('video-img')[0].childNodes[1].childNodes[0];imgfile.style.height = "355px";//用jq确定图片加载后，改变其高度$(imgfile).on("load", function () {var w = $(this).width();//alert(w);});//给各个ul增加id属性，便于后续操作。document.getElementsByClassName('video-inf')[0].childNodes[1].setAttribute("id", "SubName");document.getElementsByClassName('video-inf')[0].childNodes[2].setAttribute("id", "SubSize");document.getElementsByClassName('video-inf')[0].childNodes[3].setAttribute("id", "SubType");document.getElementsByClassName('video-inf')[0].childNodes[4].setAttribute("id", "SubPub");document.getElementsByClassName('video-inf')[0].childNodes[5].setAttribute("id", "SubLong");document.getElementsByClassName('video-inf')[0].childNodes[6].setAttribute("id", "FilmSize");//判断是否要重新布局该页面var isSub = false;var $items = $("p"); //获取网页中所有的p元素for (var i = 0; i < $items.length; i++) { //由于获取的是数组对象,因此需要把它循环出来//console.log($items[i].innerHTML);if ($items[i].innerHTML == "字幕分享") {isSub = true;console.log("is match");}}});

利用js重新排版页面相关推荐

利用js跳转页面与返回页面
利用js跳转页面利用 js跳转页面,其实也就是利用window对象中href属性进行跳转第一种方法,延时跳转 function me(){window.location.href = " ...
利用JS调用aspx页面(转载)
在实际开发中如新闻系统就需要利用js来调用某分类的新闻等. 非Codebehind版 Showjs.aspx ---------------------------- <%Response.Wr ...
利用JS实现在页面中新建一个Excel表格
一.功能展示: 二.需求分析: 1.在页面上显示4个输入框,分别输入用户的姓名,邮箱,手机号码,地址. 2.有一个添加按钮,当用户点击添加按钮,会动态添加用户的信息表格 3.实现单数行呈现黄色,双数行 ...
页面滚动事件和利用JS实现回到顶部效果
页面滚动事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
利用JS来设计夜场的倒计时以及进入页面
利用JS来绘制夜场倒计时的进入页面一.代码 1.弹出选择提示框 2.倒计时计时器 3.更换背景颜色 4.清除倒计时 5.迅速更换背景颜色 6.完整页面代码 7.运行效果图总结一.代码 1.弹出选 ...
html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现点击小图弹出大图代码.利用JS实现点击小图弹出大图代码代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示.数据选择.数据详细信息查看功能的数据库网页.该数据库 ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和 ...

利用js重新排版页面

利用js重新排版页面相关推荐

最新文章

热门文章