`
liyunqi
  • 浏览: 18605 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

用js修改控制无id属性的table和div的边框属性,粗细

JavaScriptHTMLBlog 
阅读更多

转载自：http://heisetoufa.iteye.com/blog/397269

 

关键字: js javascript 修改 控制 id 属性 table div 边框 粗细

Js代码 复制代码
  1. var table = document.getElementsByTagName("table");  //查找页面所有table标签     
  2.            
  3. for(var i=0;i<table.length;i++)     
  4. {   
  5.     table.item(i).border = "0px"; //修改table的border   
  6. }   
  7.            
  8. var div = document.getElementsByTagName("div");   //查找页面所有div标签       
  9.            
  10. for(var i=0;i<div.length;i++)     
  11. {   
  12.     div.item(i).style.border = "0px";//修改div的border   
  13. }  
var table = document.getElementsByTagName("table");  //查找页面所有table标签  
        
for(var i=0;i<table.length;i++)  
{
    table.item(i).border = "0px"; //修改table的border
}
        
var div = document.getElementsByTagName("div");   //查找页面所有div标签    
        
for(var i=0;i<div.length;i++)  
{
    div.item(i).style.border = "0px";//修改div的border
}


Js代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <HTML>   
  3.  <HEAD>   
  4.   <TITLE> New Document </TITLE>   
  5.   <META NAME="Generator" CONTENT="EditPlus">   
  6.   <META NAME="Author" CONTENT="">   
  7.   <META NAME="Keywords" CONTENT="">   
  8.   <META NAME="Description" CONTENT="">   
  9.   
  10.   <script type="text/javascript" >   
  11.   
  12. function update(temp)   
  13. {   
  14.     if(temp == 'table')   
  15.     {   
  16.         var table = document.getElementsByTagName("table");       
  17.         for(var i=0;i<table.length;i++)     
  18.         {   
  19.             table.item(i).border = "0px";   
  20.         }   
  21.     }   
  22.        
  23.     if(temp == 'div')   
  24.     {   
  25.         var div = document.getElementsByTagName("div");       
  26.         for(var i=0;i<div.length;i++)     
  27.         {   
  28.             div.item(i).style.border = "0px";   
  29.         }   
  30.     }   
  31. }   
  32. </script>   
  33.  </HEAD>   
  34.   
  35.  <BODY>   
  36.   <div style="border-width:10px;border-style:solid;height:50%;width:50%;">   
  37. <table width = "100%" border = "3">   
  38.      <tr>      
  39.          <td >   
  40.             1111111   
  41.          </td>     
  42.      </tr>     
  43. </table>     
  44. </div>   
  45. <input type = button onclick="update('table')" value=改掉table边框>   
  46. <input type = button onclick="update('div')" value=改掉div边框>   
  47.  </BODY>   
  48. </HTML>  
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    table与tab页css样式与demo.zip

    此外，还可以使用`background-color`、`color`、`font-weight`、`text-align`等属性来调整字体颜色、背景色、粗细和对齐方式。 4. 表格边框：通过`border-collapse`属性设置边框合并，如`border-collapse: collapse...

    DIV+CSS属性设置参数.docx

    在网页设计和开发中，`DIV+CSS`是一种常见的布局技术，它通过CSS（层叠样式表）来控制HTML元素，如`DIV`，以实现页面的精确布局和美化。以下是一些核心的CSS属性及其用途： 1. **Line-height** (行距): 这个属性...

    div+css实现两列table效果示例

    在网页设计中，使用`div`和`css`布局是一种常见的方法，它可以实现灵活多样的网页结构。在本示例中，我们看到如何利用这些技术创建一个两列的表格效果。这种效果通常用于构建信息输入表单或者数据展示区域。 首先，...

    前端笔记对方是否都是所发生的反倒是

    * Border 属性：指定图片边框粗细 四、链接标签 * A 标签：跳转目标" target="目标窗口的弹出方式"&gt;文本或图像 * Href 属性：指定链接目标的 URL 地址 * Target 属性：指定链接页面的打开方式 五、表格标签 * ...

    网页制作实验报告

    2. 字体和文本样式：控制字体家族，大小，粗细，斜体，行高，对齐方式等。 3. 颜色和背景：颜色可使用颜色名称、十六进制、RGB或RGBA表示，背景颜色、图片、重复和定位等属性丰富了页面视觉效果。 4. 边框和布局：...

    table高级应用把表格进行到底(必看)

    基本的思路是通过设置表格的`border`属性来定义边框的粗细、颜色，再结合JavaScript定时函数`setInterval`，周期性地改变表格的`borderColor`属性值，从而达到闪烁效果。这种动态视觉效果可以用来吸引用户的注意力或...

    CSS 基础知识 一张纸

    尺寸属性控制元素的大小。 - `width`、`min-width`、`max-width`：分别控制元素的宽度、最小宽度和最大宽度。 - `height`、`min-height`、`max-height`：分别控制元素的高度、最小高度和最大高度。 - `line-height`...

    html+css学习笔记.pdf

    2. **CSS命名规范**：保持命名清晰，避免使用过于复杂的ID和类名，提高代码可读性。 3. **CSS盒子模型**： - **内容（Content）**：元素实际显示的文本或图像。 - **内边距（Padding）**：内容与边框之间的距离。...

    随手记的div+css的小抄代码

    - 使用 `display:inline` 和 `float` 来处理IE6浏览器的双倍边距问题，同时避免使用 `border-collapse` 属性来防止表格边框重叠。 #### 二、HTML结构元素使用详解 在HTML中，不同的标签有着不同的用途，下面将详细...

    CSS参考手册.docx

    文本属性控制文本的样式，包括颜色、方向、对齐、装饰等。例如： ```css span { color: blue; direction: rtl; text-align: justify; text-decoration: underline; text-indent: 2em; text-shadow: 2px 2px 2...

    常用的CSS标签标记属性翻译注释

    ### 常用的CSS标签标记属性翻译注释 #### 一、字体属性(Type) ...以上这些CSS属性是网页设计中非常基础且常用的属性，掌握它们能够帮助开发者更好地控制网页的布局和外观，实现更加美观和实用的设计效果。

    仿MSN右下角弹窗

    - **主容器**：使用`&lt;div id="msn"&gt;`作为整个弹窗的容器。 - **样式设置**： - 定位属性：通过`position: absolute;`实现绝对定位。 - 尺寸与位置：通过`left`和`top`属性设置初始位置。 - 边框样式：使用`border...

    css,基础知识小总结

    - 使用伪元素`::after`和`content`属性。 - **示例**: ```css .clearfix::after { content: ""; display: table; clear: both; } ``` #### 八、CSS样式表 **8.1 行内样式表** - **示例**: ```html &lt;div ...

    HTML部分题库.pdf

    - `&lt;TABLE&gt;`标签用于创建表格，`size`属性不是标准HTML属性，`border`属性用于设置表格边框的粗细。 22. HTML `&lt;BODY&gt;`标签相关属性： - `&lt;BODY&gt;`标签用于定义页面主体部分，其中可以包含背景颜色、背景图片等。 ...

    电子商务网站建设之HTML语言高级.pptx

    表格的样式可以通过设置`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等标签的属性来调整，如`border`定义边框粗细，`cellpadding`和`cellspacing`控制单元格内部的间距，`align`和`valign`决定单元格的对齐方式。 3. **创建表单**：...

    java关于html+css的18点重要内容

    17. **表格及边框**：CSS可以控制表格的边框，如`border`定义边框，`border-collapse`合并单元格边框，`border-spacing`设置间隔。 18. **导航菜单案例**：创建导航菜单通常涉及`&lt;nav&gt;`标签，`&lt;ul&gt;`和`&lt;li&gt;`构建...

    Web前端开发试题.docx

    解释：在使用 table 表现数据时，需要设置 cellpadding 和 cellspacing 属性来避免表格的宽度溢出。 三、判断对或错！ 1. CSS 属性 font-style 用于设置字体的粗细。（错） 解释：CSS 的 font-style 属性用于设置...

    利用UL、Li+CSS属性制作无表格实用菜单导航效果

    `margin` 和 `padding` 属性被设置为 `0`，以消除列表默认的外边距和内边距，使得菜单项紧挨在一起，更好地控制菜单的布局。 接下来，为了让菜单项之间有清晰的区分，我们为每个 `&lt;li&gt;` 元素添加了下划线： ```css...

    最新css样式大全(整理版).pdf

    - `border`：简写属性，一次性设置边框的宽度、样式和颜色。 6. **列表属性**（`list-style`）： - `list-style-type`：指定列表项的标记类型，如`disc`（实心圆点）、`decimal`（数字）等。 - `list-style-...

    最新web前端面试题及答案.docx

    - **XHTML**：更加严格和清晰的语法，要求所有的标签都必须正确嵌套和关闭，所有属性值都必须用引号包围，不允许使用未关闭的标签等。 - **HTML5**：相对宽松的语法，允许一些错误的存在，如不关闭的标签等。 #### ...

Magicbox
Global site tag (gtag.js) - Google Analytics