相关疑难解决方法(0)

使用Javascript更改CSS值

使用javascript设置内联CSS值很容易.如果我想改变宽度,我有这样的HTML:

<div style="width: 10px"></div>
Run Code Online (Sandbox Code Playgroud)

我需要做的就是:

document.getElementById('id').style.width = value;
Run Code Online (Sandbox Code Playgroud)

它将更改内联样式表值.通常这不是问题,因为内联样式会覆盖样式表.例:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>
Run Code Online (Sandbox Code Playgroud)

使用此Javascript:

document.getElementById('tId').style.width = "30%";
Run Code Online (Sandbox Code Playgroud)

我得到以下内容:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>
Run Code Online (Sandbox Code Playgroud)

这是一个问题,因为我不仅不想更改内联值,如果我在设置之前查找宽度,当我有:

<div id="tId"></div>
Run Code Online (Sandbox Code Playgroud)

返回的值是Null,所以如果我有Javascript需要知道某些逻辑的宽度(我将宽度增加1%,而不是特定值),当我期望字符串"50%"时返回Null "真的没用.

所以我的问题是:我的CSS样式中的值不是内联的,我如何获得这些值?在给定id的情况下,如何修改样式而不是内联值?

html javascript css ajax dom

101
推荐指数
3
解决办法
22万
查看次数

@ font-face url指向本地文件

我需要在html文件中包含一个字体(OpenSymbol),字体文件在本地文件夹中(我知道它的确切绝对路径).如果我像这样使用@ font-face:

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
Run Code Online (Sandbox Code Playgroud)

它适用于Chrome,Opera和Safari,但不适用于Firefox和IE9.其他@ font-face用法在所有浏览器中都可以正常使用.

顺便说一句,在Chrome中,我收到警告:

Resource interpreted as Font but transferred with MIME type application/octet-stream
Run Code Online (Sandbox Code Playgroud)

我该怎么做才能干净地包含一个未安装在操作系统上的本地存储字体?

编辑:

我发现不同网址的列表似乎不起作用!如果我把[...].ttf网址放在首位,Chrome会加载字体,但如果它放在其他地方则不会!

第二编辑:

我让它在除Firefox之外的所有浏览器中工作:

@font-face { 
  font-family: 'OpenSymbol';
  src: url('file:<path>/openSymbol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'OpenSymbolEOT';
  src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
...
Run Code Online (Sandbox Code Playgroud)

然后

.element {
  font-family: OpenType, OpenTypeEOT, [...];
}
Run Code Online (Sandbox Code Playgroud)

无论如何,它确实在IE中工作,但不在eclipse中,它使用IE的渲染引擎... oO

顺便说一句,firefox因安全问题而出现问题:请看这里

html css fonts font-face

29
推荐指数
2
解决办法
4万
查看次数

标签 统计

css ×2

html ×2

ajax ×1

dom ×1

font-face ×1

fonts ×1

javascript ×1