Question

我想将以下CSS添加到元素 -

{min-height: calc(100% - 291px);
    min-height: -webkit-calc(100% - 291px);}

我想使用Javascript将此CSS添加到我的元素中。我的问题是，如何在不重写的情况下添加这两个值。

element.style.minHeight= "calc(100% - 291px)";
element.style.minHeight= "-webkit-calc(100% - 291px)"; // This should NOT overwrite the previous property.

我如何实现这一目标？谢谢！

Answer 1

您可以使用类添加样式。

.class1 {
   min-height: calc(100% - 291px);
   -webkit-min-height: calc(100% - 291px)
}

element.classList.add('class1')

Answer 2

似乎你在寻找JavaScript的跨浏览器解决方案。从@Cecil回答的样式表类中添加类是个好主意。但是，如果你没有javascript，那么请尝试以下方法。

    import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute, ParamMap } from '@angular/router';
    import 'rxjs/add/operator/switchMap';
    import { StateService } from './state.service';
    import { State } from '../models/state';
    import { Params } from '@angular/router/src/shared';

    import { Observable } from 'rxjs/Observable';   


    @Component({
      selector: 'app-add',
      templateUrl: './add.component.html'
    })
    export class AddComponent implements OnInit {
      state$: Observable<State>;
      constructor(private route: ActivatedRoute,
        private router: Router,
        private stateService: StateService) { }

      ngOnInit() {    
        this.state$ = this.route.paramMap.switchMap((params: ParamMap) => this.stateService.getState(params.get('id')));    
      }    
}

如果您需要更多浏览器检测，请转到此处：How to detect Safari, Chrome, IE, Firefox and Opera browser?

Answer 3

其他答案 - 虽然提供了各种工作 - 但缺乏关于“为什么”原始作品或如何“复制”JavaScript行为的细节。因此，这是避免推荐非转发兼容代码的直接答案。

首先，'重复CSS属性'技巧正常工作，因为现代CSS引擎将忽略属性，其值不可理解。

因此，原始代码可以语义编写如下（请注意，顺序是颠倒，因为CSS是last-valid-and-assigned-property-values wins ）：

// assigns style property if value (-moz-calc..) is understood
element.style.minHeight = "-moz-calc(100% - 291px)";
if (element.style.minHeight === "") {
    // assigns style property if value (calc..) is understood
    element.style.minHeight = "calc(100% - 291px)";
}

也就是说， CSS min-height属性只有一个内联样式的值。

更直接地，代码甚至可以在没有条件检查的情况下编写。也就是说，以下“作为”无效/不可理解的属性值不应导致更新：

element.style.minHeight = "calc(100% - 291px)";
element.style.minHeight = "foo"; // min-height NOT updated

因此，我们可以编写原始的以下正常（注意“-webkit-”是第一个）CSS属性赋值阴影，如果/一旦浏览器支持，将应用'CSS标准'值：

// min-height set in webkit browser only
element.style.minHeight = "-webkit-calc(100% - 291px);";
// min-height set (reset in webkit) IF AND ONLY IF browser supports calc
element.style.minHeight = "calc(100% - 291px)";

如果希望获得“精确”的浏览器再现，可以通过直接分配样式属性来完成。（在这种情况下，我将原始的CSS属性顺序保持不变。）

element.setAttribute("style",
  "min-height: calc(100% - 291px); min-height: -webkit-calc(100% - 291px);");

// Only *one* of these values was assigned to the CSS style element!
console.log(element.style.minHeight)

然而，使用样式表，即使是内联样式表，也是我的第一选择。

Answer 4

您要求的是从JavaScript端设置样式，这样这些样式将是跨平台的。

首先，对于您的问题，设置两次相同的css属性;不，这是不可能的。简单地，dom元素的样式是具有一些键的对象，每个键都被赋予一些值。没有办法在一个对象中重复多次相同的键，类似于你正在寻找的;即minHeight的两个值。

您的问题背后的动机是确保从JavaScript设置的样式值在不同的浏览器上正常工作。事实上，我认为你不必担心。例如，在53之后的Firefox版本the -moz-calc() has been removed中。

假设您在分配某些值时仍然希望确定并支持该检查，那么您需要检查浏览器前缀;即moz-用于firefox，o-用于opera，webkit用于chrome，等等以下是一个例子。检查前缀来自link。

我知道你知道如何从css为你的元素设置跨浏览器样式，这是一种理想的方式。但是，正如我所看到的，您对使用JavaScript更感兴趣。

var prefix = (function () {
  var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1];

  return ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
})();

然后您可以按如下方式设置元素属性

element.style.minHeight= previx + "-calc(100% - 291px)"

使用Javascript

4 个答案: