首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何检查父元素是div还是font并返回fontsize?

要检查父元素是div还是font并返回fontsize,可以通过以下步骤实现:

  1. 获取当前元素的父元素:使用JavaScript中的parentNode属性可以获取当前元素的父节点。
  2. 检查父元素的标签名:使用JavaScript中的tagName属性可以获取元素的标签名。
  3. 判断父元素是div还是font:通过比较父元素的标签名,判断它是div还是font
  4. 返回fontsize:如果父元素是div,则返回null,如果父元素是font,则使用getAttribute方法获取fontsize属性的值。

以下是一个示例的JavaScript代码:

代码语言:txt
复制
function checkParentElement(element) {
  var parentElement = element.parentNode;
  
  if (parentElement.tagName.toLowerCase() === 'div') {
    return null;
  } else if (parentElement.tagName.toLowerCase() === 'font') {
    return parentElement.getAttribute('fontsize');
  }
}

// 示例用法
var element = document.getElementById('yourElementId');
var fontsize = checkParentElement(element);
console.log(fontsize);

在上述代码中,checkParentElement函数接受一个参数element,表示当前元素。函数首先获取当前元素的父元素,然后通过比较父元素的标签名来判断是div还是font,最后返回相应的fontsize值或null

请注意,这只是一个示例代码,实际使用时需要根据具体的页面结构和需求进行适当的修改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

制作H5响应式页面注意事项、微信二次分享

,例如div、header、p等等           1.2.3     表单通常用form形式(无论表单提交还是ajax提交),标签通常用span+input,用p包住,方便布局,例如:                   ...会感觉变大了《因为同样大小的屏幕,分辨率从1024-->800》)                 em:1) 相对于body元素,1em=body元素font-size大小      2) em会继承级...,如果级设置了font-size,则 1em=元素font-size大小,相对大小,但是需要确定font-size                rem:相对于根元素font-size...大小(没有了继承级尺寸概念,不会嵌套多了混乱),为了方便,通常设置元素大小时10px,此时10px=1rem;     此满足了自适应不同屏幕大小的要求,用rem或者%做单位                ...%:百分比相对于元素,注意给最外层设置高度为百分比时,需要给html和body元素设置100%; html, body{ width: 100%; height: 100%;

1.3K00

制作H5响应式页面注意事项、微信二次分享

,例如div、header、p等等           1.2.3     表单通常用form形式(无论表单提交还是ajax提交),标签通常用span+input,用p包住,方便布局,例如:                   ...会感觉变大了《因为同样大小的屏幕,分辨率从1024-->800》)                 em:1) 相对于body元素,1em=body元素font-size大小      2) em会继承级...,如果级设置了font-size,则 1em=元素font-size大小,相对大小,但是需要确定font-size                rem:相对于根元素font-size...大小(没有了继承级尺寸概念,不会嵌套多了混乱),为了方便,通常设置元素大小时10px,此时10px=1rem;     此满足了自适应不同屏幕大小的要求,用rem或者%做单位                ...%:百分比相对于元素,注意给最外层设置高度为百分比时,需要给html和body元素设置100%; html, body{ width: 100%; height: 100%;

1.3K90

JavaScript动态设置根元素的rem

什么rem 说到rem自然就会想到em,我们知道em相对于元素的字体大小的单位,那么rem则是相对于根元素也就是元素的字体大小的单位。 2.如何用rem解决移动端适配 ?...通过这张图我们就可以观察到,div的宽度和高度根据根元素()来决定的,根元素的字体大小为100px,然后给div的宽度和高度设置为2rem、1rem,最后生成的div的宽度为200px、高度为100px...375)) + 'px'; } c(); return c; })(), false); html{font-size..."orientationchange" : "resize", //判断屏幕旋转还是resize; fn = function() { var width = docEle.clientWidth...; width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //设置html的fontSize,随着event的改变而改变

3.8K10

【融职培训】Web前端学习 第2章 网页重构18 rem布局

="test2">测试文字2 25 26 27 在上面的代码中,p元素div元素,我们将p元素的字体设置成1em和0.5em,当div...元素font-size值发生变化的时候,就会影响两个p元素的字体大小,说明em一个相对单位,它参照的元素font-size值。...font-size值,就能影响两个p元素的字体大小,这说明rem也是一个相对的单位,它参照的html元素font-size值。...首先考虑一个问题,rem的参照物html元素font-size属性,那么如果html的font-size属性不变的话,我们使用的rem单位仍然一个固定的单位,所以我们需要做的让html元素font-size...,只需要知道这段代码可以检测设备的尺寸,通过设备的尺寸设置html元素font-size值,这个font-size值会根据设备尺寸的变化而变化,这样我们设置相同的rem值,就会起到百分比的作用了。

43510

css 文字自适应大小_div自适应窗口大小

大家好,又见面了,我你们的朋友全栈君。 viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等。...: 4vw;} 我靖鸣君 我靖鸣君 我靖鸣君 ...移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个元素中。(重绘+回流) 4....还有一种用户的操作,比如改变浏览器大小,改变浏览器的字体大小等(回流+重绘) 让我们看看下面的代码如何影响回流和重绘的: var s = document.body.style; s.padding...(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将

3.2K20

Rem布局的原理解析

em作为font-size的单位时,其代表元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN 我在面试时经常问会一道和em有关的题,来看一下面试者对css细节的了解程度,如下,问s1...="s5">1 1 .p1 {font-size: 16px; line-height: 32px;} .s1 {font-size...: 2em;} .s5 {font-size: 2em; line-height: 2em;} em可以让我们的页面更灵活,更健壮,比起到处写死的px值,em似乎更有张力,改动元素的字体大小,子元素会等比例变化...我认为一般内容型的网站,都不太适合使用rem,因为大屏用户可以自己选择要更大字体,还是要更多内容,一旦使用了rem,就剥夺了用户的自由,比如百度知道,百度经验都没有使用rem布局;一些偏向app类的,...: width / 100} body {font-size: 16px} 那字体的大小如何实现响应式呢?

1.1K20

Web前端学习 第2章 网页重构18 rem布局

="test2">测试文字2 25 26 27 在上面的代码中,p元素div元素,我们将p元素的字体设置成1em和0.5em,当div...元素font-size值发生变化的时候,就会影响两个p元素的字体大小,说明em一个相对单位,它参照的元素font-size值。...font-size值,就能影响两个p元素的字体大小,这说明rem也是一个相对的单位,它参照的html元素font-size值。...首先考虑一个问题,rem的参照物html元素font-size属性,那么如果html的font-size属性不变的话,我们使用的rem单位仍然一个固定的单位,所以我们需要做的让html元素font-size...,只需要知道这段代码可以检测设备的尺寸,通过设备的尺寸设置html元素font-size值,这个font-size值会根据设备尺寸的变化而变化,这样我们设置相同的rem值,就会起到百分比的作用了。

40430

H5页面适配及微信默认字号问题的最佳实践

相对单位,基准为节点字体大小,若自身定义了 font-size 则按自身计算,不推荐使用 rem 相对单位,css3新加,按照根节点 的字号作为基准,下方提供的设置根节点 62.5%...即 viewpoint width / height,按照 视窗 的宽高的百分比进行计算,和 css 中的 % 按照元素的宽高作为计算基准的方式不同 vmin / vmax 取视窗宽高二者中较小 /...width: 100vmax; height: 100vmax; } 1.4 其他 % / vm / pc / pt / ch / ex ... % 百分比,一般相对于元素,但对于 position...: absolute; 的元素相对于已定位的元素,对于 position: fixed; 的元素相对于可视窗口,并且当元素没有指定高度时,子元素设置百分比没有效果,高度直接为子元素的实际高度 vm...解决微信等第三方App的默认字号问题 微信等 App 内可以设置默认字号,若用户修改了默认文字大小,会给上述的适配造成困扰,解决方法先获取 App 的原始缩放比例,再在此基础上计算 font-size

3.1K140

Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件

vue2中,代码的复用和抽象的主要形式组件,但在有些情况下仍然需要对普通dom元素做底层操作,这种情况下需要自定义指令。...在这里可以进行一次性的初始化设置 inserted 被绑定元素插入节点时调用 (仅保证节点存在,但不一定已被插入文档中) update 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode...定义响应事件函数 methods: { doClick: function() { //注意此处this的作用返回自定义组件...自定义事件 Vue自定义事件为组件间通信设计, vue中组件通过prop传递数据给子组件,而想要将子组件的数据传递给组件,则可以通过自定义事件的绑定 Vue实例->子Vue实例,通过prop...定义响应事件函数 methods: { doClick: function() { //注意此处this的作用返回自定义组件

1.1K10

【前端词典】提高幸福感的 9 个 CSS 技巧

还有一个问题就是第一个子元素的 margin-top 值会加在元素上的 bug(最后一个子元素的 margin-bottom 也存在类似的问题)。这里是不是有人问为什么呢?...所以我们可以在首位元素使用 padding 来替代 margin。当然有的时候使用 padding 不能满足需求,这时你也可以在“非空内容”这个条件做文章。即在元素添加一个伪元素。...即当使用 fixed 的直接元素的高度和屏幕的高度相同时 fixed 和 absolute 的表现效果会是一样的。...如果这个直接级内的元素存在滚动的情况,那就加上 overflow-y:auto。 3....( @fontSize, @color, @lineHeight, @textAlign:left ) { font-size: @fontSize; color: @color; line-height

69430

JS:用rem来做响应式开发

margin,padding,width,height,等等都用%来计算,CSS中的百分比中的百指的是什么,指的是元素,所有百分比都是这样的。...子元素宽度50%,那么元素的宽度就是百,子元 素的padding-left:50%,元素的宽度百,子元素的margin-top:20%,那么元素的高百。...,例如那么1rem=10px;如何做到适配呢?...为20,那么宽度为w对应 的font-size可这么求 $('html').css('fontSize',size+'px'); } } 注意这里有一个小坑...,当你把这个小demo拿到谷歌浏览器里面验证的时候,你会发现开始这3个div会随着你浏览器窗口缩小而缩小,到达某个值后就不动了,原因谷歌浏览器默认支持html的font-size最小值为10px;在小于这个值就不会再小了

6.1K10

移动端页面的自适应rem

比如320px的10%32px,640px的10%64px, 如果10个10%宽度的元素放在一起,那肯定就是100%,即挤满屏幕(宽度),不会超出,也不会留白。...rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下 emem作为font-size的单位时,其代表元素的字体大小...为32px*/html {font-size: 2rem}/* 作用于非根元素,相对于根元素字体大小,所以为64px */p {font-size: 2rem} 三、Rem布局原理 如果子元素设置rem.../ 100 + 'px'; 那么如何把UE图中的获取的像素单位的值,转换为已rem为单位的值呢?...公式元素宽度 / UE图宽度 * 100,让我们举个例子,假设UE图尺寸640px,UE图中的一个元素宽度100px,根据公式100/640*100 = 15.625 rem弹性布局的一种实现方式

2.3K20

【前端词典】提高幸福感的 9 个 CSS 技巧

还有一个问题就是第一个子元素的 margin-top 值会加在元素上的 bug(最后一个子元素的 margin-bottom 也存在类似的问题)。这里是不是有人问为什么呢?...所以我们可以在首位元素使用 padding 来替代 margin。当然有的时候使用 padding 不能满足需求,这时你也可以在“非空内容”这个条件做文章。即在元素添加一个伪元素。...即当使用 fixed 的直接元素的高度和屏幕的高度相同时 fixed 和 absolute 的表现效果会是一样的。...如果这个直接级内的元素存在滚动的情况,那就加上 overflow-y: auto。 3....( @fontSize, @color, @lineHeight, @textAlign:left ) { font-size: @fontSize; color: @color;

84120
领券