JavaScript与CSS交互

补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。

文章目录

JavaScript与CSS交互
一、style属性
二、隐藏元素
三、修改className更改样式
四、拖拽事件

一、style属性

通过元素的style属性，可以获取或修改元素的CSS样式
如下代码所示：将body的背景色设置为red

document.body.style.backgroundColor = 'red'

注意：原css样式为短横线命名法，在使用style属性时，需转换称小驼峰命名法
如CSS中，字体大小为font-size, 使用style属性时，需改为fontSize

小试牛刀：
创建三个按钮，对应三种颜色，点击按钮时，将页面背景修改为对应颜色

代码如下所示：

<input type="button" name="" id="" value="red" onclick="changeColor( )" />
<input type="button" name=" " id="" value="yellow" onclick="changeColor( )" />
<input type="button" name="" id="" value="blue" onclick="changeColor( )" /><script type="text/javascript">function changeColor()document.body.style.backgroundColor=event.target.value}
</script>

二、隐藏元素

元素.style.display =值
元素.style.visibility =值

小试牛刀：
创建一段文本，文本下方放置两个按钮，点击按钮可隐藏/显示上方文本。分别尝试visibility和display两种方式实现

代码如下所示：

<div id="content">这是一段文本</div>
<input type="button" name="" id="" value="显示" onclick="show()"/>
<input type="button" name="" id="" value="隐藏" onclick="hide()" />
<script type="text/javascript">function show() {document.getElementById( 'content' ).style.visibility="visible"}function hide() {document.getElementById( 'content' ).style.visibility="hidden"}
</ script>

三、修改className更改样式

通过修改元素的所属类，并对不同的类设置相应样式，同样可达到更改样式的目的

.lg-red{font-size: 20px;color: red ;
}元素.className = 'lg-red '
元素.className = ''

小试牛刀：
创建一个列表，当鼠标移入列表中某一项时，为该项添加lg-red类（设置如上），鼠标移出时，移除该类

代码如下所示：

<ul><li onmouseover="highlight()" onmouseout="reset()">苹果</li><li onmouseover="highlight()" onmouseout="reset()">香蕉</li><li onmouseover="highlight()" onmouseout="reset()">橙子</li><li onmouseover="highlight()" onmouseout="reset()">菠萝</li>
</ul>
<script type="text/javascript">function highlight() {event.target.className = "lg-red"}function reset() {event.target.className = ""}
</ script>

四、拖拽事件

将需要拖拽的源对象的dragable属性设为true

p draggable="true">拖动我</p>

给目标对象绑定ondragover事件函数，禁用其默认事件行为

<div ondragover="allowDrag()"></div>
<script type="text /javascript">function allowDrag() {event.preventDefault()}
</script>

源对象
ondragstart事件：用户开始拖动元素时触发
ondrag事件：元素正在拖动时触发
ondragend事件：用户完成元素拖动后触发
目标对象
ondragenter事件：当被鼠标拖动的对象进入其容器范围内时触发
ondragover事件：当被拖动的对象在容器范围内时触发
ondragleave事件：当被拖动的对象离开容器时触发件
ondrop事件：源元素被拖入容器内，并且释放鼠标时触发

小试牛刀：
使目标文本变为可拖动状态，让其可以在两个容器之间来回拖动

容器样式代码：

.container{width: 200px;height: 200px;border: 1px solid black;margin-top: 20px;display: flex;justify-content: center;align-items: center
}

容器盒子：

<div class="container" ondragover="allowDrag()"ondrop="drop()"><p draggable="true" ondragstart="drag()">目标文本</p>
</div>
<div class="container" ondragover="allowDrag()" ondrop="drop()"></div>

效果代码：

<script type="text / javascript">var current0bjfunction allowDrag() {event.preventDefault()}function drag(){current0bj = event.target}function drop(){event.target.appendChild( current0bj)}
</script>

响应式网页设计之JavaScript与CSS交互相关推荐

HTML5期末大作业：美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网 ...
响应式网页设计之JavaScript基础
JavaScript 一.认识JavaScript 1.什么是JavaScript? 2.JavaScript的组成? 3.JavaScript用来做些什么? 2.JavaScript与java有什么 ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
重学前端，万字入门 HTML+CSS+响应式网页设计
响应式网页设计认证 | freeCodeCamp.org 观前提醒:擅用 Ctrl+F,笔记不求详细,但求理解,部分难以理解的内容我给了实例或者文档的链接,还有一些我推荐的小游戏,希望能给个三连
FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
响应式网页设计简单入门
Overview: 构造基本的HTML页面动态加载样式表 Viewport 字体缩放侧边栏导航菜单图片自适应其他总结说到响应式网页设计(Responsive web design),最近 ...
响应式网页设计_响应式网页设计中的常用技术
响应式网页设计在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
《响应式网页设计》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...
12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...

响应式网页设计之JavaScript与CSS交互