dom和css

最新推荐文章于 2024-09-01 10:56:23 发布
最新推荐文章于 2024-09-01 10:56:23 发布
阅读量667 收藏
点赞数
分类专栏： JAVASCRIPT学习笔记 文章标签： input button action css html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxiaojun9238/article/details/7319620
版权
  
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>CSS Inline Rule Scripting</title>
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
</head>
 
<body>
 
 
 
<div id="test"> CSS Rules in Action </div>
 
<hr />
 
 
 
<script type="text/javascript"> 
 
<!-- 
 
  theElement = document.getElementById("test");
 
//-->
 
</script>
 
 
 
<form id="cssForm" name="cssForm" action="#" method="get">
 
<strong>Alignment:</strong>
 
<select
 
 οnchange="theElement.style.textAlign=this.options[this.selectedIndex].text;">
 
      <option>left</option>
 
      <option>center</option>
 
      <option>right</option>
 
      <option>justify</option>
 
</select>
 
<br /><br />
 
 
 
<strong>Font:</strong> 
 
<select
 
 οnchange="theElement.style.fontFamily=this.options[this.selectedIndex].text;">
 
      <option>sans-serif</option>
 
      <option selected="selected">serif</option>
 
      <option>cursive</option>
 
      <option>fantasy</option>
 
      <option>monospace</option>    
 
</select>
 
 
 
  
 
 
 
<input type="text" id="font" name="font" size="10" value="Impact" />
 
<input type="button" value="set" οnclick="theElement.style.fontFamily =
 
 document.cssForm.font.value;" />
 
 
 
<br /><br />
 
<strong>Style:</strong> 
 
<select
 
οnchange="theElement.style.fontStyle=this.options[this.selectedIndex].text;">
 
      <option>normal</option>
 
      <option>italic</option>
 
      <option>oblique</option>    
 
</select>
 
 
 
<strong>Weight:</strong> 
 
<select οnchange="theElement.style.fontWeight=this.options[this.selectedIndex].text;">
 
      <option>normal</option>
 
      <option>bolder</option>
 
      <option>lighter</option>
 
</select>
 
 
 
<strong>Variant:</strong> 
 
<select
 
 οnchange="theElement.style.fontVariant=this.options[this.selectedIndex].text;">
 
      <option>normal</option>
 
      <option>small-caps</option>
 
</select>
 
<br /><br />
 
 
 
<strong>Text Decoration</strong>
 
<select
 
οnchange="theElement.style.textDecoration=this.options[this.selectedIndex].text;">
 
      <option>none</option>
 
      <option>overline</option>
 
      <option>underline</option>
 
      <option>line-through</option>
 
      <option>blink</option>
 
</select>
 
 
 
<br /><br />
 
<strong>Font Size:</strong>
 
<select
 
 οnchange="theElement.style.fontSize=this.options[this.selectedIndex].text;">
 
      <option>xx-small</option>
 
      <option>x-small</option>
 
      <option selected="selected">small</option>
 
      <option>medium</option>
 
      <option>large</option>
 
      <option>x-large</option>
 
      <option>xx-large</option>
 
</select>
 
  
 
 
 
<input type="text" id="size" name="size" size="3" maxlength="3" value="36pt" />   
 
<input type="button" value="set" οnclick="theElement.style.fontSize =
 
 document.cssForm.size.value;" />
 
<br /><br />
 
 
 
<strong>Color:</strong> 
 
<input type="text" id="fgColor" name="fgColor" size="8" value="yellow" />
 
<input type="button" value="set" οnclick="theElement.style.color =
 
 document.cssForm.fgColor.value;" />
 
 
 
<br /><br />
 
<strong>Background Color:</strong> 
 
<input type="text" id="bgColor" name="bgColor" size="8" value="red" />
 
<input type="button" value="set" οnclick="theElement.style.backgroundColor =
 
 document.cssForm.bgColor.value;" />
 
 
 
<br /><br />
 
<strong>Borders:</strong> 
 
<select
 
 οnchange="theElement.style.borderStyle=this.options[this.selectedIndex].text;">
 
      <option>none</option>
 
      <option>dotted</option>
 
      <option>dashed</option>
 
      <option>solid</option>
 
      <option>double</option>
 
      <option>groove</option>
 
      <option>ridge</option>
 
      <option>inset</option>
 
      <option>outset</option>
 
</select>
 
<br /><br />
 
 
 
<strong>Height:</strong>
 
<input type="text" id="height" name="height" value="100px" size="3" />   
 
 
 
<strong>Width:</strong> 
 
<input type="text" id="width" name="width" value="100px" size="3" />   
 
<input type="button" value="set" οnclick="theElement.style.height =
 
 document.cssForm.height.value; theElement.style.width =
 
 document.cssForm.width.value;" />
 
 
 
<br /><br />
 
<strong>Top:</strong> 
 
<input type="text" id="top" name="top" value="100px" size="3" />   
 
<strong>Left:</strong>
 
<input type="text" id="left" name="left" value="100px" size="3" />   
 
<input type="button" value="Set"
 
 οnclick="theElement.style.position='absolute';theElement.style.top =
 
 document.cssForm.top.value; theElement.style.left = document.cssForm.left.value;"
 
 />
 
<br /><br />
 
<strong>Visibility</strong>   
 
<input type="button" value="show" οnclick="theElement.style.visibility='visible';"
 
 />
 
<input type="button" value="hide" οnclick="theElement.style.visibility='hidden';"
 
 />
 
</form>
 
<hr />
 
</body>
 
</html>

DOM操作CSS
weixin_44522602的博客
03-15 993
参考b站尚硅谷
JSAnimCssDom:轻量级 DOM 和 CSS 属性动画系统
07-14
JSAnimCssDom是一个专注于DOM和CSS属性动画的轻量级框架，特别适用于需要在浏览器环境中实现流畅、高效动画效果的项目。该框架支持包括IE9、Chrome和Firefox在内的多种主流浏览器，确保了广泛兼容性。 ### 1. 动画...
jQuery中的DOM和CSS操作
depers15的博客
07-14 1314
jQuery中的DOM和CSS操作DOM ，它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在JavaScript 中，DOM 不但内容庞大繁杂，而且开发的过程中需要考虑更多的兼容性、扩展性。在jQuery 中，已经将最常用的DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。一．DOM 简介1.D 表示的是页面文档Document、O 表示对象，即一组含有独立特性
DOM修改Css样式
dengfengling999的博客
01-18 1525
1.修改box1的宽度、高度、背景颜色 2.读取样式 读取样式表style的样式 语法：元素.currentStyle.样式名 它可以用来读取当前元素正在显示的样式（谁生效就获取谁的） 如果当前元素没有设置样式，则获取默认值 注意currentStyle只有IE浏览器支持，其他不支持 在其他浏览器可以使用：getComputerStyle（）这个方法获取元素当前的样式，不支持ie8以下浏览器 这个方法是windows的方法，需要2个参数： 第一个，要获取样式的元素 第二个,可以传递一
DOM树和CSS树解读
最新发布
2301_79858914的博客
09-01 1313
DOM树是浏览器解析HTML文档后生成的树形结构。它将HTML文档的内容表示为一个节点树，每个节点代表文档中的一部分，例如标签、属性或文本。CSS树是浏览器解析CSS样式表后生成的对象模型树。它表示文档中的所有样式规则及其对应的元素和属性。DOM树和CSS树是浏览器渲染网页的基础。DOM树表示文档的结构和内容，CSS树表示样式和样式规则。两者结合生成渲染树，最终决定页面的显示效果。理解这两个数据结构有助于开发者更好地进行网页性能优化。
前端面试题：DOM和CSSDOM树渲染过程
欢迎来到我的博客
08-18 2595
感觉自己复习的已经差不多了，只是缺少面试机会，然而昨天突然的京东的电话，貌似让我直接丢掉了一个进大厂的机会，死在了最基础的问题，说实话自己还是没有完全复习好
css之ShadowDOM
qq_40278396的博客
08-23 1017
shadowDom
DOM操作CSS样式设定
qq_45799465的博客
02-01 1099
标签对象.style.属性 = 属性值，只能获取行内样式 注意： JavaScript中 - 只作为减号使用。 css属性中带有 - 的属性 必须写成小驼峰命名法 font-size ---- fontSize margin-top ---- marginTop。 如果需要单位 必须要 携带单位 不能光写数字需要区分css样式和属性。 <style> *{ margin: 0; padding: 0; }
DOM、CSS渲染解析过程
浅听记忆的博客
03-02 1377
DOM解析过程 如下为dom的解析图解 解析的过程具体为： 网络进程接收响应头（content-type），根据该字段来判定文件类型，假设值为‘text/html’ 为该请求创建渲染进程，并与网络进程建立数据通道，网络进程接收到的数据通过数据通道传递给渲染进程进而读取数据 渲染进程读取的数据交给HTMLparser（渲染引擎内部模块）解析，解析器会动态接收字节流，将其解析为DOM 字节流转化为DOM 通过分词器（类似词法解析）将字节流转化为token（tag Token和文本Token） 由图可
DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题
好好学习天天向上
09-08 5360
知识点对于浏览器说，页面加载主要有两个事件浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。 HTML文件的解析就是生成DOM树的过程HTML中的三类script 渲染进程在解析 HTML 的时候，如果遇到一个没有任何属性的 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完成后再切换回渲染引擎继续渲染流程。 async、defer属性的js脚本，渲染引擎遇到这一行命令，
JS DOM之操作CSS属性
大河之犬的博客
10-06 2524
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性。在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。语法：obj表示DOM对象，cssText的值是一个字符串。应该写成borderBottomWidth。
菜单滑块模式：DOM和CSS
03-04
在网页设计中，菜单滑块模式是一种常见的交互方式，它结合了DOM（Document Object Model）和CSS（Cascading Style Sheets）技术来实现。本文将深入探讨如何利用这两种技术创建一个功能完善的菜单滑块模态。 首先，...
JavaScript_React Strict DOM RSD是React DOM命令式DOM和CSS的一个子集，支持web和
05-20
3. **样式管理**：RSD可能对CSS进行了封装，提供了更严格的CSS管理，避免了全局样式的冲突和冗余，提高了样式的一致性和可维护性。 4. **副作用管理**：在RSD中，DOM操作通常会被视为副作用，需要在特定生命周期...
第05章 基础 DOM 和 CSS 操作（中）
08-11
在本章“第05章 基础 DOM 和 CSS 操作（中）”中，我们将深入探讨Web开发中的核心概念——Document Object Model (DOM) 和 Cascading Style Sheets (CSS) 的基本操作。DOM是HTML和XML文档的编程接口，而CSS则是用于...
第05章 基础 DOM 和 CSS 操作（下）
08-11
在本节中，我们将深入探讨基础DOM（Document Object Model）和CSS操作的下部分内容。DOM是Web开发中的一个核心概念，它将HTML或XML文档结构化为一个可编程的节点树，允许我们通过JavaScript或其他脚本语言动态地访问...
HTML事件绑定
yangxiaojun9238的专栏
03-05 923
HTML Event Bindings HTML Event Bindings <form action="#" method="get" onreset="alert('Form reset');" onsubmit="alert('Form submit');return false;"> onblur:
dom动态修改表格
yangxiaojun9238的专栏
03-05 863
(X)HTML Table Inspector Test Table Product SKU Price This has been an HTML 4 table ex
联动显示隐藏+部分验证实例
yangxiaojun9238的专栏
03-05 734
HTML+CSS+JAVASCRIPT th{ background-color:#FF9933 } td{ background-color:#99CCFF; } textarea{ background-color:#339999 } input{ background-color:#99CCFF } <!-- var cities
jquery-basics: 掌握jQuery操作DOM和CSS技巧
知识点二：jquery操作DOM和CSS jquery提供了丰富的API来操作DOM和CSS。例如，"jquery('#myElement').css('color', 'red')"这行代码会找到ID为"myElement"的元素，并将其文字颜色设置为红色。同样，"jquery('#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值