layer.open传参数到子页面

layer.open怎么传参数到子页面呢？不知道的小伙伴来看看小编今天的分享吧!

父页面传参给子页面(iframe页面)：

代码：

var index = layer.open({

title: '编辑',

type: 1,

shade: 0.2,

maxmin: true,

shadeClose: true,

area: [openWH[0] + 'px', openWH[1] + 'px'],

offset: [openWH[2] + 'px', openWH[3] + 'px'],

content: content, //这里是iframe页面的路由

success: function(layero, index){

var body=layer.getChildFrame('body',index);

var fileId = body.contents().find("#fileId");

$(fileId.selector).val(data.id);

}

});

子页面

class="layui-input">

以上就是小编今天的分享了，希望可以帮助到大家。

layer可以指定某个div下操作么

详解 css 新特性 级联层@layer

介绍

@layer又名级联层，是 css2022 推出的新特性，目的是用来解决样式被覆盖，使用混乱的场景。

同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制，让 CSS 样式按照我们定义好的级联顺序展示，起到控制不同样式间的优先级的作用。

语法

@layer a { div { background-color: red; }}创建了一个名字为a的级联层

我们也可以先定义级联层，之后再补充规则

@layer a,b,c;@layer a { div { background-color: red; }}@layer b { #box { background-color: blue; }}@layer c { div { background-color: green; }}

级联层的执行顺序将会按照定义的时候的先后顺序执行，所以，最终会执行 c 的级联层，得到一个蓝色的 div，即使级联层 b 是一个 id 选择器，仍然是最后一个级联层会生效

此时的级联层的顺序是@layer c > @layer b > @layer a

由此，我们可以大致得出一个结论：可以利用级联层将 css 进行模块的划分，按照先后顺序，更好的控制样式。

怎么引用

引用的方式分为三种

• 内部引入

直接创建一个 @layer 规则，其中包含作用于该层内部的 CSS 规则：

• @import 引入

@import(index.css) layer(a);- 命名方式创建带命名的级联层，但不指定任何样式。样式随后可在 CSS 内任意位置添加@layer a;@layer a { div { color: red; }}非 @layer 包裹层与 @layer 层内样式优先级

没有被 @layer 包裹的样式和被 @layer 包裹的样式相比，那个优先级更高呢。

@layer A { div { background: red; }}@layer B { div { background: orange; }}@layer C { div { background: yellow; }}div { background: green;}

最终为绿色，这里会有一个非常重要的结论，非 @layer 包裹的样式，拥有比 @layer 包裹样式更高的优先级，因此，上述规则的排序是：未被 @layer 包裹的样式 > @layer C > @layer B > @layer A

级联层的规则

级联层可以像上面的案例一样，简单命名，也可以设置匿名使用方式和嵌套使用方式 ### 匿名 允许创建一个不带名字的 @layer：

@layer { p { margin: 1rem; }}

这里，创建了一个匿名层。匿名层的两个重要特性：

• 创建后无法向其再添加规则
• 该层和其他命名层功能一致，优先级也遵循后定义的匿名层，比其他已定义的 @layer 层，优先级更高

@layer a,b,c;@layer { div { background: orange; }}@layer a { div { background-color: red; }}@layer b { #box { background-color: green; }}@layer c { div { background-color: blue; }}

最终展示匿名层的样式，此时的优先级的顺序为 匿名层@layer > @layer c > @layer b > @layer a > @layer a

嵌套层

嵌套层的意思就是在 @layer 内部，我们可以再嵌套使用 @layer 级联层

@layer A { @layer B { ...; }}

上述代码等价于

@layer A.B { ...;}

那么这里的样式谁优先呢

@layer A { div { background: blue; } @layer B { div { background: red; } }}

最终为蓝色, 对于单个 @layer 内的嵌套关系，样式优先级为 @layer A > @layer A.B

!important 对 CSS @layer 的影响

div { background: black;}@layer A { div { background: blue !important; }}@layer C { div { background: green; }}

最终会展示!important的样式，也就是说!important的规则更加优先。

那么，接下来这个场景呢?

div { background: black !important;}@layer A { div { background: blue !important; }}@layer C { div { background: green; }}

在上述代码中，非级联层和级联层 A 中各添加了一个!important, 结果为蓝色。

这是一个非常重要的特性，在比较正常（非 !important）规则时，越是级联（排序较后的 @layer 规则），优先级越低；反之，在比较 !important 规则时，越是级联靠后的（排序较后的 @layer 规则），优先级越高。

!important在比较的时候遵循下面的规则

• !important 样式高于非 !important 样式
• 在比较 !important 规则时，优先级顺序与正常规则相反，在正常状态下优先级越低的，在 !important 下优先级越高。