自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > JavaScript脚本 >

javascript改变html样式

作者:灰牛站长•发布时间:2021-07-12 12:12:30•浏览

语法:Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):

属性 描述
backgroundColor 设置元素的背景色
height 设置元素的高度
width 设置元素的宽度
color 设置文本的颜色
font 在一行设置所有的字体属性
fontFamily 设置元素的字体系列
fontSize 设置元素的字体大小

注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

看看下面的代码:改变<p> 元素的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id='con'>对于无法保证的明天,内心惶恐惶惶不安</p>
<script type="text/javascript">
var mycon = document.getElementById('con');
mycon.style.color = 'white';
mycon.style.width = '300px';
mycon.style.height = '300px';
mycon.style.backgroundColor = '#f90';
mycon.style.lineHeight = '300px';
mycon.style.fontSize = '14px';
mycon.style.textAlign ='center';
</script>
</body>
</html>

相关文章

  • javascript控制类名(className 属性)

    javascript控制类名(className 属性)

    书写过程中注意 JavaScript定义变量赋值 里面的 不能使用JavaScript关键词与JavaScript保留字 语法: object.className = classname 作用: 获取元素的class 属性 为网页内的...
    2021-07-12 12.07.59
  • javascript中innerhtml属性

    javascript中innerhtml属性

    语法: Object.innerHTML 注意: Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。 注意书写,innerHTML区分大小写。 我们通过id="con"获取p 元素,...
    2021-07-12 12.07.00
  • javascript通过id获取元素

    javascript通过id获取元素

    语法: document.getElementById("id") !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/title/headbodyh3今天星期六/h3p id="con"此刻再学习javascipt入门篇/pscript type="text/javascript"var myst...
    2021-07-12 12.07.13
  • dom文档对象模型

    dom文档对象模型

    !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/title/headbodyh2a href="http://www.dhnblog.cn/web/"javascript文档对象模型/a/h2p对元素进行操作,可以添加改变或移除CSS样式等/puliJav...
    2021-07-12 12.07.23
  • JavaScript-关闭窗口(window.close)

    JavaScript-关闭窗口(window.close)

    用法: window.close();//关闭本窗口 或 窗口对象.close();//关闭指定的窗口 例如:关闭新建的窗口。 !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/titlescript type="text/javascr...
    2021-07-12 12.07.10

手机端