草庐IT

4.CSS盒子模型

全部标签

javascript - 如何让导入的 css 字体/图标对 shadow dom 中的元素产生影响?

假设我想使用shadowdom创建一个自定义元素。模板中的某些元素具有在链接的css文件中指定的类名。现在我想让css规则对元素产生影响。但由于shadowdom样式边界,我无法实现。DreamLineTourBlogContactErrorSearchvarimportDoc=document.currentScript.ownerDocument;varproto=Object.create(HTMLElement.prototype,{createdCallback:{value:function(){vart=importDoc.querySelector("#blog-hea

javascript - webpack css loader 不工作 : no output css file

我正在从事开源元素,现在我需要为前端设置webpack。我在下面尝试了webpack配置,JS工作正常,但css不行,没有css输出文件。我不知道为什么会这样,请帮助我。下面是我的webpack配置js文件:constpath=require("path");constwebpack=require('webpack');constExtractTextPlugin=require("extract-text-webpack-plugin");constnode_dir=__dirname+'/node_modules';constsassLoaders=['css-loader','

javascript - Vanilla JavaScript : Is there a way to toggle multiple CSS-classes in one statement?

我使用这些JavaScript代码来更改脚本中的类:vartoggleDirection=function(){group.classList.toggle('left-to-right');group.classList.toggle('right-to-left');}在我的示例中,只有两个类需要更改,但也可以是多个类...因此:有谁知道编写示例的方法不那么冗余? 最佳答案 不,不可能直接使用Element.classListAPI。查看API,您可以阅读:toggle(String[,force])Whenonlyonearg

javascript - 将两个 View 模型传递给操作

我处理电子商务的购物车。我有两个View模型。首先是客户信息:publicclassCartViewModel{publicstringFirstName{get;set;}publicstringEmail{get;set;}//...otherfields}第二个是客户购物车:publicclassProductsCart{publicGuidId{get;set;}publicdecimalPrice{get;set;}publicintItemsOrdered{get;set;}}主要是购物车存储在用户localStorage中,我应该通过jquery将其与客户信息一起从loc

javascript - jquery 可拖动事件更改子元素的 css

你好,请看这段代码$('.new-div').draggable({containment:"#bord",create:function(){$(".new-div").css("width",'auto');},drag:function(){$(".new-div").css("width",'auto');},start:function(){$(".new-div").css("width",'auto');},stop:function(){$(".new-div").css("width",'auto');}});$(document).on("click",".clos

javascript - Vue.js 'v-bind:class' 不更新,即使模型更新

我有一个项目列表,我想对当前选定的项目应用一种样式。我也在使用Vuex来管理状态。我的列表组件:constList=Vue.component('list',{template:'0">'+''+'{{g.text}}'+''+''computed:{items:function(){returnthis.$store.state.items;}},methods:{selectItem:function(index){this.$store.commit('selectItem',index);}}});我的商店:conststore=newVuex.Store({state:{it

javascript - 没有模型更改的 Angular 2 组件模型刷新 View

我有一个Angular2.4.0应用程序,我正在处理一个表单,该表单有一些支持Javascript验证/格式化几个字段。字段格式化完成后,如果格式化返回的值与附加到模型的原始值匹配,则View不会更新。有没有办法强制更新View?由于没有模型更改,因此强制组件刷新没有任何效果。我猜我需要用jQuery之类的东西单独更新View,但我想先检查是否有更好的解决方案。组件:导出类组件{字段:字符串formatField(updatedField:string){this.field=updatedField.replace(newRegexp("[^\\d]","g"),"");//remo

javascript - 如何将弹出框内的输入标签绑定(bind)到 Vue 模型

我在弹出内容中有一个input,如下所示:JSFiddleHTML:'>ClickMe!{{message}}这是JS:newVue({el:'#vue-app',data:{message:'IamaText'}});$(document).ready(function(){$('[data-toggle="popover"]').popover();});如您所见,data-content的输入绑定(bind)得很好,但里面的输入没有绑定(bind)!任何想法将不胜感激。 最佳答案 你可以这样使用:这是工作演示:https://

javascript - 新保存的 backbone.js 模型的 ID

Backbone.js在创建和保存新模型时发出POST请求,但它不会考虑要保存的模型(即进一步保存PUT中的结果而不是POST),直到模型有一个id..如何服务器是否应该返回新创建模型的ID,以便backbone.js可以设置它(即,它应该如何响应初始POST)?如果backbone.js不处理这个问题,我认为最好的方法是使用成功处理程序来设置ID? 最佳答案 您有两个选择。第一种是为POST请求返回与显示操作的GET请求相同的JSON结构(返回单个项目)。这使用单个请求。来自documentation:Setahashofmode

javascript - 获取应用于元素的 css 类的背景颜色

比如说,我有以下CSS类:.upComing{background:#ccc;font-weight:bold;}在我的HTML中,我有一个表,其中一些行应用了该类,如下所示:到目前为止一切顺利,但是通过JavaScript我有监听td点击的事件,我想获取行的颜色(我知道我可以获取行的类,但在这种情况下我需要能够从类中获取颜色)。我需要这样做,因为表格可以导出到excel文件,如果行颜色在CSS类上,则不会应用于excel文件,我想在之前将这种颜色应用于每个td将html发送到excel生成器。PS:该表是从我们创建的jQuery插件动态生成的,它仍在进行中,但当我们对它有足够的信心时