在js中修改html body的样式

目录
  • 一、原始定义
  • 二、js操作，以修改宽度为例
  • 三、效果：宽度已被修改

一、原始定义

先在css中定义：body, html 宽高为300px

body, html {
   width: 300px;
   height: 300px;
}

二、js操作，以修改宽度为例

// 获取body、html节点style（主要是这里html，一开始不清楚获取方式）
let bodyStyle = document.body.style
let htmlStyle = document.getElementsByTagName('html')[0].style

// 获取浏览器的宽度，width 也可以设置为任意值
let width = document.documentElement.clientWidth || document.body.clientWidth

// 重置body宽度
bodyStyle.width = `${width}px`

// 重置html宽度
htmlStyle.width = `${width}px`

// 或者其他样式的修改，如：
htmlStyle['min-width'] = `${width}px`

三、效果：宽度已被修改

到此这篇关于在js中修改html body的样式的文章就介绍到这了,更多相关js中修改html body的样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • html加css样式实现js美食项目首页示例代码

    html加css样式实现js美食项目首页示例代码

    介绍:美食杰首页 这个是轮播图效果:利用了element ui框架搭建的html.css样式,然后再通过vue指令和data存储数据和methods方法在操作data里面的数据来完成数据交互继而渲染到页面上就如下图. 这个是内容精选页效果:也是利用了element ui框架搭建的html.css样式 过程: 引用了element ui框架搭建的轮播图框架,利用数据交互完成效果. 先安装element ui,再main.js里面引入element ui import elementUi from

  • HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    刮刮乐想必大家都玩过,小时候兜里一有钱,就喊上小伙伴兴冲冲的跑去家旁边的小卖部,用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱,满眼期待的刮着买来的刮刮乐,心里早已想好中了100块钱大钞要去买好多好多辣条.卡片.陀螺.奥迪双钻的悠悠球- 认认真真看完本文,你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦!(当然如果你没有女朋友的话,也可以用你珍藏多年的美女图片哦!) ⛳️使用HTML.CSS和JavaS实现刮刮卡/刮刮乐 ♥️别着急,先看演示

  • JavaScript中html画布的使用与页面存储技术详解

    JavaScript中html画布的使用与页面存储技术详解

    目录 一.JavaScript使用html中的画布 二.页面存储技术 一.JavaScript使用html中的画布 1.画布:页面中用于绘制图形的特殊区域 2.绘制图形的过程 (1)创建画布:使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> (2)JavaScript中获取画布 document.getElementById('id') (3)准备

  • 解决@RequestBody接收json对象报错415的问题

    @RequestBody接收json对象报错415 前端请求: $.ajax({ url: basePath() + "/index/login.do", type : "post", data: JSON.stringify(form), dataType : "json", contentType : "application/json;charset=utf8", success: function (data) { c

  • C#通过HttpWebRequest发送带有JSON Body的POST请求实现

    目录 起因 原来的处理方式 新的方式 起因 很多博客都有描述到这个问题,那么为什么我还要写一篇文章来说一下呢,因为其他的都似乎已经过时了,会导致其实body 并没有发送过去.至于为什么不使用其他的诸如 HttpClient 之类的,是由于业务需要. 原来的处理方式 通过 GetRequestStream 来获取请求流,后把需要发送的 Json 数据写入到流中 private T PostDataViaHttpWebRequest<T>(string baseUrl, IReadOnlyDict

  • 聊聊@RequestBody和Json之间的关系

    在使用springmvc的时候,后台@RequestBody接受的是一个json格式的字符串,一定是一个字符串. 我们可以通过@RequestBody Map @RequestMapping(value="/queryAccountList.do",produces="application/json;charset=UTF-8") @ResponseBody public HashMap<String, Object> queryAccountList

  • JS、CSS和HTML实现注册页面

    JS、CSS和HTML实现注册页面

    一个用HTML和CSS实现的注册页面模板,废话不多说了,上代码! 更新:使用JavaScript实现用户名和密码表单校验功能. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; bo

  • SpringMVC @RequestBody Date类型的Json转换方式

    目录 SpringMVC @RequestBody Date类型的Json转换 通过GsonBuilder设置DateFormat的格式 以零配置框架为例 以零配置形式框架下的代码实现为例讲解 @RequestBody接收json字符串,自动将日期字符串转换为java.util.Date 1.配置springMVC可以接收json字符串 2.@Controller类代码 3.实体类对象代码 4.DateJsonSerializer类代码 5.DateJsonDeserializer类代码 Spr

  • 在js中修改html body的样式

    在js中修改html body的样式

    目录 一.原始定义 二.js操作,以修改宽度为例 三.效果:宽度已被修改 一.原始定义 先在css中定义:body, html 宽高为300px body, html { width: 300px; height: 300px; } 二.js操作,以修改宽度为例 // 获取body.html节点style(主要是这里html,一开始不清楚获取方式) let bodyStyle = document.body.style let htmlStyle = document.getElementsBy

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • JS添加或修改控件的样式(Class)实现方法

    使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改. <input id="txtBianCeng" type="text" /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById("txtBianCeng").className = "lezhu99"; 删除样式(Class) docum

  • Vue.js中对css的操作（修改）具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

  • 基于leaflet.js实现修改地图主题样式的流程分析

    今天遇到了一点点的小情况,我自己根据leaflet.js做了一个离线地图,公司要用来做态势,但是地图的底图用的是高德的原图,样式是下面这样的: 但是态势的主题是如下的这种淡蓝色: 这就造成了本次的需求,需要可以修改样式的主题,由于本人是个后端小佬,前端菜鸡,所以实现起来发生了一些困难,这里简单介绍下实现的路程. 首先看下效果: 然后介绍下艰辛的过程: 首先,需要用到一个基于leaflet.js的插件: https://github.com/hnrchrdl/leaflet-tilelayer-c

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

  • 微信小程序 JS动态修改样式的实现代码

    微信小程序 JS动态修改样式的实现代码

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="

  • 解决Django中修改js css文件但浏览器无法及时与之改变的问题

    今天修改之前实习小伙伴写的js代码的时候,遇到修改后页面未发生变化的问题.因为我是web开发小白,所以上网查了一波,得以解决~~ 初次进行web工程开发的人可能会碰到这样的情况:自己在明明对工程上的某个js或css文件进行了修改,并提交到服务器上去了.但是在客户端浏览器里面打开页面时,并没有看到修改后的效果,而是该js文件的旧版本的效果. 如果了解过浏览器缓存就知道,为了效率,浏览器通常会缓存js/css文件.如果没有清除浏览器缓存的该js文件的话,js的修改效果就不会起作用,因为浏览器还是用的

  • 微信小程序 JS动态修改样式的实现方法

    微信小程序 JS动态修改样式的实现方法

    前言 本文主要介绍了关于微信小程序 JS动态修改样式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色. 是这样的效果: 代码如下: 上一份小代码 index.wxml <view > <view class="cont" style="background:{{background}};">属性改变</view> <

随机推荐