草庐IT

javascript - 未捕获的类型错误 : Cannot set property style of#<HTMLElement> which has only a getter

coder 2024-07-29 原文

以下代码在 Chrome、Safari 中失败，在 Firefox 中运行良好

"use strict";
document.body.style = "background-color: green;";
<p>background should be green</p>

删除“using strict”，它起作用了。

这是 Chrome 和 Safari 中的错误还是 Firefox 中的错误？ MDN says setting the style is valid .

最佳答案

问题

并非所有浏览器都支持将包含 CSS 声明 block 文本表示的字符串分配给 style 属性。

element.style = styleString; // Might not work

解决方法

作为解决方法，您可以将其设置为内容属性，或设置为 cssText属性:

element.setAttribute('style', styleString);

element.style.cssText = styleString;

标准行为

在兼容 DOM L2 Style 和 ES5 的旧版浏览器上，赋值应该

  • 采用严格模式
  • 在非严格模式下被忽略。

在符合 CSSOM 和 ES5 的较新浏览器上，赋值应该

  • 总是工作

完整的细节

根据DOM Level 2 Style规范中，style属性在ElementCSSInlineStyle接口(interface)中定义如下:

interface ElementCSSInlineStyle {
  readonly attribute CSSStyleDeclaration  style;
};

因此，style 属性应该实现为 accessor property有 getter 但没有 setter。

Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'style'); /* {
  configurable: true,
  enumerable: true,
  get: function(){...},
  set: undefined
} */

根据 ECMAScript 5 ，当您尝试为这样的属性分配一些值时，必须在严格模式下抛出错误:

When an assignment occurs within strict mode code, [...] the LeftHandSide also may not be a reference [...] to an accessor property with the attribute value {[[Set]]:undefined} [...]. In these cases a TypeError exception is thrown.

但是，DOM L2 样式已被较新的 CSS 对象模型 (CSSOM) 取代。

根据该规范，style接口(interface)的 IDL 属性 ElementCSSInlineStyle ，由 HTMLElement 实现，定义为 [PutForwards]扩展属性:

[NoInterfaceObject]
interface <i>ElementCSSInlineStyle</i> {
  [SameObject, PutForwards=<a href="http://www.w3.org/TR/cssom/#dom-cssstyledeclaration-csstext" rel="noreferrer noopener nofollow">cssText</a>] readonly attribute <a href="http://www.w3.org/TR/cssom/#cssstyledeclaration" rel="noreferrer noopener nofollow">CSSStyleDeclaration</a> <a href="http://www.w3.org/TR/cssom/#dom-elementcssinlinestyle-style" rel="noreferrer noopener nofollow">style</a>;
};

这意味着设置 style 属性的行为必须类似于设置 cssText CSSStyleDeclaration 之一。因此，它们必须是等价的:

element.style = styleString;
element.style.cssText = styleString;

这就是为什么它适用于较新的浏览器。

关于javascript - 未捕获的类型错误 : Cannot set property style of#<HTMLElement> which has only a getter，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32468352/

HTMLElementjavascriptcodestylenoreferrergoogle-chrome

有关javascript - 未捕获的类型错误 : Cannot set property style of#<HTMLElement> which has only a getter的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  3. ruby - Infinity 和 NaN 的类型是什么？ - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  4. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？ 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)

  5. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  6. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  7. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  8. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  9. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  10. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

随机推荐